JQuery와 - UI를 자동 완성 내 자신의 질문에 대답 탭 키 초점을

Question

게시를 방지 같은 : 키보드를 사용하고 Tab 키를 누르면

그것은 일

  var bandValue = "-1"; 
      var $genreSelect = $("#genre-select"); 
      var $bandInput = $("#band-input"); 
      var $goButton = $("#go-button"); 
      var bands = [ 
       { 
       value: "1", 
       label: "AC/DC", 
       desc: "..." 
       }, 
       { 
       value: "2", 
       label: "Black Sabbath", 
       desc: "Ozzy Osbourne, Tony Iommi, Bill Ward, etc." 
       }, 
       { 
       value: "3", 
       label: "Cars, The", 
       desc: "..." 
       } 
      ]; 
      $bandInput.autocomplete({ 
       source: bands, 
       focus: function(event, ui) { 
       $bandInput.val(ui.item.label); 
       return false; 
       },     
       select: function(event, ui) { 
       console.log("select event"); 
       bandValue = ui.item.value; 
       $bandInput.val(ui.item.label);   
       return false; 
       }   
      }); 

그러나 초점은 "관련없는 버튼"대신 의도 "이동"버튼으로 이동합니다. 나는 키 누르기와 클릭 이벤트를 모두 삼켜 버리고 $ goButton이 포커스를 얻었을 때 완전히 제어하려고했지만 아무런 효과가 없었다.

Answer 1

많은 문제를 해결 한 후 솔루션은 실제로 매우 간단했습니다. autocomplete.select 이벤트가 TAB에서 온 것이면 $ goButton.focus()에 대한 호출을 건너 뛰고 일반 이벤트가 해당 작업을 수행하도록 허용합니다.

  $bandInput.autocomplete({ 
       source: bands, 
       focus: function(event, ui) { 
       $bandInput.val(ui.item.label); 
       return false; 
       },     
       select: function(event, ui) { 
       bandValue = ui.item.value; 
       $bandInput.val(ui.item.label); 
       if(event.which != null){ 
        if(event.which != 9){ 
         //it's not a tab, so focus 
         $goButton.focus(); 
        } 
        else { 
         //already going to focus, so don't create race condition 
        } 
       }    
       return false; 
       }   
      });