jQuery completamento automatico immettere il problema chiave

Question

Ho una casella di testo per la ricerca utilizzando il completamento automatico jQuery. Quando digito qualcosa nella casella di testo, vengono visualizzati i suggerimenti dai quali nessuno è selezionato.

Ho scoperto che selectFirst: true non è supportato ora. Se seleziono un elemento nell'elenco a discesa e premere invio, funziona correttamente.

Il problema è che se l'utente immette app per Apple e preme il tasto Invio, si tenta di inviare il modulo con app. Il modulo deve essere inviato solo con uno dei valori dall'elenco a discesa.

Ho provato a disabilitare il modulo di invio premendo Invio in modo da poter inviare il modulo da JavaScript ma non è stato possibile trovare una soluzione.

Ecco il mio codice:

$("#searchtext").autocomplete({ 
    source: path + 'autocompletesearch?category=' + $("select[name='category'] option:selected").val(), 
    width: '500px', 
    matchContains: true, 
    select: function(event, ui){ 
     $(".searchform").attr("action", path + "fullproductinfo/" + ui.item.id); 
     $("input[name='searchid']").val(ui.item.value); 
     $(".searchform").submit(); 
    } 
}); 

E la mia forma:

 <form method="post" action="search" class="searchform"> 
      <div class="searchdiv"> 
       <input type="text" id="searchtext" name="searchtext" 
        placeholder="Search a product or a brand" autocomplete="off"/> 
      </div> 
      <div class="searchbutton"> 
       <input type="button" name="btnsearchproduct" value="Search" /> 
      </div> 
      <div class="clear"></div> 
     </form> 

Si noti che non v'è <input type='button' e non 'submit', in modo predefinito Immettere premendo non dovrebbe funzionare per la forma. È il completamento automatico suppongo che stia inviando il modulo su submit.

Answer 1

Se si utilizza questo: http://jqueryui.com/autocomplete/

poi si desidera prima voce a autoFocus, è possibile utilizzare l'opzione ora:

$(".selector").autocomplete({ autoFocus: true }); 

menzionato nella documentazione: http://api.jqueryui.com/autocomplete/

EDIT

Dato che hai inserito il problema chiave, può provare in questo modo:

$(".selector").keydown(function(event){ 
    if(event.keyCode == 13) { 
     if($(".selector").val().length==0) { 
      event.preventDefault(); 
      return false; 
     } 
    } 
}); 

Answer 2

ho avuto un problema simile & è così che ho deciso che

if ($(".selector").val().length > 0) { 
var options = $(".selector").autocomplete("option"); 
var fromAutocomplete = false; 

jQuery.each(options.source, function(index, device) { 
if ($(".selector").val() == options.source[index]) { 
    fromAutocomplete = true; 
} 
}); 

if (!fromAutocomplete) { 
$(".selector").val(""); 
    $(".selector").attr("disabled", false); 
    return false; 
} 
} 

Answer 3

Se si utilizza jQuery UI per auto completo, tutto ciò che serve è specificando l'autofocus: true opzione.

Seleziona automaticamente il primo risultato e quando viene premuto il tasto invio, verrà utilizzato il primo risultato.

$(".selector").autocomplete({ 
    autoFocus: true, 
    source: function (request, response) { 
    //your code 
    }, 
    select: function(event, ui) { 
    //your code 
    } 
});