jqueryの-UIオートコンプリートは、自分の質問に答えるために、タブキーフォーカス

Question

投稿を防ぐ：私はjqueryの-UIオートコンプリートのオブジェクトを使用していますし、私の元のjavascriptが何かを見

<select id="genre-select"> 
     <option value="-1">Make a selection</option> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
    </select> 
    <input id="band-input" type="text" /> 
    <button id="go-button">Go</button> 
    <button>Unrelated Button</button> 

：

を私は、次のHTMLを持っています以下のような：キーボードナビゲーションを使用して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; 
       }   
      }); 

は、しかし、焦点は「無関係のボタン」の代わりに、意図した「GO」ボタンにジャンプします。私はすべてのkeypressとclickイベントを呑み込み、$ 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; 
       }   
      });