JQuery-UI автозаполнения предотвратить Язычок Основное внимание

Question

Проводка, чтобы ответить на мой собственный вопрос:

У меня есть следующие 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> 

Я использую JQuery-UI объект автозаполнения и мой оригинальный JavaScript смотрел что-то как:

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

Он работал, однако при использовании навигации с помощью клавиатуры и нажать TAB, фокус будет прыгать на «Несвязанный Баттон» вместо кнопки, предназначенного «Go». Я попытался проглотить все нажатия клавиш и нажать события и полностью контролировать, когда $ 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; 
       }   
      });