È possibile limitare l'immissione di sequenze di tasti non valide con la casella combinata di completamento automatico dell'interfaccia utente jQuery?

Question

Quando si utilizza the jQuery UI autocompletecombobox, avrei pensato che ci fosse un'opzione per forzare solo una voce di chiave valida in base all'elenco. Esiste un modo per non consentire chiavi non valide, quindi è possibile inserire solo voci valide nell'elenco? Inoltre, c'è un modo per impostare un valore predefinito della casella combinata?

Se la mia lista ha (C#, Java, Python)

posso iniziare a digitare "ABCDs.". e mi consente di digitarla. Voglio che siano consentite solo voci valide.

Answer 1

AGGIORNATO 2

Tested on 
Internet Explorer 6 and later 
Chrome 
Firefox 
Opera 

Demo:http://so.devilmaycode.it/can-you-restrict-entering-invalid-keystrokes-with-jquery-ui-autocomplete-combobox

Nucleo codice JavaScript:

var Tags = ['csharp', 'java', 'python' ]; 

    $("#autocomplete").keypress(function(event) { 
     //Firefox workaround.. 
     if (!event.which && 
      ((event.charCode || event.charCode === 0) ? event.charCode: event.keyCode)) { 

      event.which = event.charCode || event.keyCode; 
     } 
     var charCode = String.fromCharCode(event.which).toLowerCase(); 
     var search_val = this.value + charCode; 
     var x = search_val.length - 1; 
     var match; 
     for (var i = 0; i < Tags.length; i++) { 
      if (charCode == Tags[i][x] && Tags[i].indexOf(search_val) != -1) { 
       match = true; 
      } 
     } 
     //Backspace functionality added! 
     if (!match && event.which != 8) { 
      event.preventDefault(); 
     } 
    }); 

NOTA:

1. vigore solo valido voce chiave sulla base della lista;
2. impostare un valore predefinito;
3. implementazione leggero ;-)

Fatemi sapere!

Answer 2

La tua domanda sembra essere anche una richiesta comune sulla jQuery plugin forum e in How to implement “mustMatch” and “selectFirst” in jQuery UI Autocomplete persone sono state discutere la questione.

Il numero accepted answer per questa domanda funziona. Quindi la soluzione di Doc Hoffiday merita davvero i punti di reputazione.

In alternativa è possibile utilizzare Jörn Zaefferer's autocomplete con l'opzione "mustMatch".

<script type="text/javascript"> 
$(document).ready(function(){ 
    var availableTags = ["csharp", "java", "python"]; 
    $("#tags").autocomplete(availableTags, { 
     mustMatch: true 
    }); 
}); 
</script> 

<input id="tags" /> 

UPDATE

Inizialmente, avevo perso che si voleva una soluzione casella combinata. Grazie per averlo reso più chiaro.

I have tweaked the combobox example.

avevo bisogno di fare alcune modifiche per rendere realtà il lavoro all'interno di una forma. Ho introdotto un breve ritardo per garantire che gli eventi accadessero nel giusto ordine. Oltre a questo ho inserito la soluzione di Doc Hoffiday.

Ho usato un evento "change", ma potresti anche essere in grado di ottenere qualcosa lavorando usando l'evento "close". Odio dirlo, ma la mia esperienza finora con il nuovo completamento automatico dell'interfaccia utente jQuery è che è un po 'inaffidabile. Le cose sembrano rovinare quando hai configurato più di un tipo di callback dell'evento.

UPDATE 2

Ho aggiunto un nuovo selettore personalizzato sulla base di soluzione di Doc Hoffiday in modo che il testo inserito non viene sovrascritto quando si verifica l'inizio di un'opzione valida. Ho anche aggiornato la sorgente in modo da limitare le opzioni offerte a corrispondenze più esatte. Spero che questo sia più vicino alle tue esigenze.

I have tweaked my previous combobox example.

Answer 3

Dopo aver impostato il completamento automatico, utilizzare questo codice per impedire il carattere di spazio e il carattere equivale (codice ASCII 32 e 61). E per impostare un valore predefinito;

 $("#myautocompletectrl").keypress(function (e) { 
     if (e.which == 32 | e.which == 61) { 
      e.preventDefault(); 
     } 
    }).val('mydefaultvalue'); 

Si comporta come se il tasto non fosse mai stato premuto (come dici tu volevi).

Testato su Firefox 3.63 e jQuery UI 1.8 Completamento automatico.

Inoltre, se si scopre che si inoltre desidera implementare la funzionalità mustMatch in jQuery UI 1.8 di completamento automatico, poi guarda qui: How to implement "mustMatch" and "selectFirst" in jQuery UI Autocomplete?

EDIT: Vedo che hai già letto e commentato il mio post .... :)

Answer 4

$("#myautocompletectrl").keypress(function (e) { 
    if (e.which == 32 | e.which == 61) { 
     e.preventDefault(); 
    } 
}).val('mydefaultvalue'); 

funziona per me ... grazie youuu: D