jQuery的UI自动完成防止Tab键焦点

Question

Posting to answer my own question:

I have the following HTML:

    <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>

I am using the jquery-ui autocomplete object and my original javascript looked something like:

            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;
              }           
            }); 

It worked, however when using keyboard navigation and pressing TAB, the focus would jump to the "Unrelated Button" instead of the intended "Go" button. I tried to swallow all the keypress and click events and completely control when the $goButton gets focus, nothing worked.

Answer 1

After a lot of troubleshooting, the solution was actually quite simple. If the autocomplete.select event is from a TAB, I simply skip the call to $goButton.focus(), and allow the regular event to do it's job.

            $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;
              }           
            });