Completamento automatico jquery: utilizzando la scheda per selezionare il primo elemento e rimanere a fuoco sulla casella di ricerca

Question

Quando utilizzo il completamento automatico dell'interfaccia utente JQuery, è necessario che la chiave di tabulazione compili la casella di ricerca con il primo elemento nei risultati del completamento automatico, includa uno spazio in seguito , quindi consentire all'utente di continuare a digitare.

<div class="ui-widget"> 
    <form id="searchbox" method="GET" action="http://duckduckgo.com/"> 
    <input id="search" type="text" name="q"> 
    <input id="submit" type="submit" value="Search"> 
    </form> 
</div> 
<script> 
var tabKey = 9; 
$('#search').autocomplete({ 
    source: [ 'this', 'that', 'foobar' ], 
    delay: 0, 
    selectFirst: true, 
    select: function(event, ui) { if (event.keyCode == tabKey) { 
     $('#search').focus().select(); 
    } } 
}); 
// without this, the tab key doesn't trigger an event                      
$('.ui-autocomplete').keypress(function(event) {}); 
</script> 

In altre parole, nell'esempio di cui sopra, se qualcuno digitato "th", vedrebbero "questo" e "quello" nelle scelte di completamento automatico. La scheda che colpisce aggiunge "questo" (nota lo spazio) all'input e la messa a fuoco rimane nell'input.

Qualcuno può darmi un puntatore di ciò che mi è mancato? Non so Javascript molto bene, quindi le piccole parole sono buone :)

E forse informazioni più utili (jQuery 1.7.2) dalla sezione HEAD:

<script src="js/jquery-latest.js"></script> 
<script src="js/jquery-ui-1.8.20.custom.min.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.20.custom.css" /> 

Edit: Sembra che autoFocus: true mi farò in parte lì. Ora, se posso solo capire come mantenere l'attenzione sulla casella di input.

Answer 1

Hiya demohttp://jsfiddle.net/DMDHC/

Spero che questo aiuti, :)

Quindi, se si digita Ra vedrete rambo e altre opzioni popping up e poi ha colpito tab chiave e vedrete che apparirà added text + " " concentrandoti sulla casella di testo in modo da poter continuare a digitare.

Un'altra cosa che ho fatto è event.preventDefault(); che impedirà qualsiasi comportamento predefinito, resto sai cosa stai facendo bruv! B-)

codice jQuery

$("#search").autocomplete({ 
    source: function(req, resp) { 
     $.post("/echo/json/", { 
      json: '["Rambo", "Foobar", "This", "That", "Batman", "Hulk"]', 
      delay: 1 
     }, function(data) { 
      resp(data); 
     }, "JSON"); 
    }, 
     select: function(event, ui) { 

      var TABKEY = 9; 
      this.value = ui.item.value; 

      if (event.keyCode == TABKEY) { 
       event.preventDefault(); 
       this.value = this.value + " "; 
       $('#search').focus(); 
      } 

      return false; 
     } 
}); 

​ 

Answer 2

uso questo (CoffeeScript):

$("#autocomplete").keydown (event) -> 
    if event.keyCode != $.ui.keyCode.TAB then return true 
    $(this).trigger($.Event 'keydown', keyCode: $.ui.keyCode.DOWN) 
    false