completamento automatico non consentire l'immissione di testo libero?

Question

E 'possibile non consentire l'immissione di testo libero nel widget JQuery UI autocomplete?

ad es. Desidero solo che l'utente sia autorizzato a selezionare dall'elenco di elementi presentati nell'elenco di completamento automatico e non desidera che siano in grado di scrivere del testo casuale.

Non ho visto nulla nelle demo/documenti che descrivono come farlo.

http://jqueryui.com/demos/autocomplete/

sto usando completamento automatico come questo

$('#selector').autocomplete({ 
    source: url, 
    minlength: 2, 
    select: function (event, ui) { 
     // etc 
    } 

Answer 1

Un modo potrebbe essere quello di utilizzare una convalida aggiuntiva sulla forma presentare (se si utilizza un modulo) per evidenziare un errore se il testo non è una delle opzioni valide.

Un altro modo sarebbe quello di allegare all'evento di modifica del completamento automatico che verrà generato anche se non è selezionata un'opzione. È quindi possibile fare validazione atto a garantire l'input dell'utente è nella tua lista o visualizzare un errore se non lo è.

Answer 2

Se si desidera che l'utente per ottenere solo la voce dalla lista quindi utilizzare combobox completamento automatico.

http://jqueryui.com/demos/autocomplete/#combobox

HTH

Answer 3

Che dire di opzione mustMatch?

'Se impostato su true, il completamento automatico consente solo i risultati presentati dal back-end. Si noti che i valori illegali risultano in una casella vuota '.

Answer 4

Ho utilizzato il modulo della casella combinata che fornisce un pulsante "freccia giù". Quindi al tag di input, aggiungi quanto segue al tag di input intorno alla riga 41 (a seconda della versione della combobox http://jqueryui.com/demos/autocomplete/#combobox)

input.attr ("readonly", "readonly");

Quindi aggiungere il codice in modo che se l'utente fa clic sulla casella di input, verrà visualizzato l'elenco a discesa.

Per i miei scopi, ho aggiunto un flag di sola lettura che posso passare al modulo, quindi se ho bisogno di leggerlo, posso anche accenderlo/spegnerlo.

Answer 5

vecchia questione, ma qui:

var defaultVal = ''; 
    $('#selector').autocomplete({ 
     source: url, 
     minlength: 2, 
     focus: function(event, ui) { 
      if (ui != null) { 
       defaultVal = ui.item.label; 
      } 
     }, 
     close: function(event, ui) { 
      $('#searchBox').val(defaultVal); 
     } 
    }); 

Answer 6

Secondo il API documentation, di proprietà della manifestazione changeui è nullo se la voce non è stato scelto dalla lista, in modo da poter impedire il testo gratuito semplicemente come questo:

change: function(event,ui) 
     { 
     if (ui.item==null) 
      { 
      $("#your_input_box").val(''); 
      $("#your_input_box").focus(); 
      } 
     } 

Answer 7

L'opzione casella combinata funziona bene se si utilizza un set list, se si dispone di un elenco generato dinamica tramite un jSON ottenere, allora si può acquisire solo i dati sul cambiamento.

Esempio completo con parametri aggiuntivi di seguito.

 $("#town").autocomplete(
     {  
      select: function(event, ui) { 
       $("#town").val(ui.item.value); 
       return false; 
      },   
      focus: function(event, ui) { 
        $("#town").val(ui.item.label); 
        return false; 
       },   
      change: function(event, ui) { 
       if (!ui.item) { 
        $("#town").val(""); 
       } 
      }, 
      source: function(request, response) { 
       $.ajax({ 
        url: 'urltoscript.php', 
        dataType: "json", 
        data: { 
         term : request.term, 
         country : $("#abox").val() // extra parameters 
        },       
        success: function(data) { 
         response($.map(data,function (item) 
         {         
          return { 
           id: item.id, 
           value: item.name 
          }; 
         })); 
        } 
       }); 
      }, 
      minLength: 3 
      , highlightItem: true         
     });