jquery UI Combobox ONCHANGE

come posso albind una funzione onchange in una combobox jqueryUI? Ecco il mio codice:

$(".cmbBox").combobox({ change:function(){ alert($(this).val()); } }); 

Quando il valore cambia, avviserà il valore aggiornato.

Qualsiasi aiuto per favore .. 🙂

Nell’esempio la fonte di esempio di combobox è tutto a posto. Avrei triggersto l’evento change della selezione sottostante modificando il codice sorgente come questo (cambiando il gestore di eventi select all’interno dell’inizializzazione del completamento automatico all’interno del plugin):

 /* Snip */ select: function( event, ui ) { ui.item.option.selected = true; self._trigger( "selected", event, { item: ui.item.option }); select.trigger("change"); }, /* Snip */ 

e quindi definire un gestore di eventi per l’evento di change regolare della select :

 $(".cmbBox").change(function() { alert(this.value); }); 

Sfortunatamente questo non funzionerà esattamente allo stesso modo del normale evento select.change : si innescherà anche se selezioni lo stesso object dalla casella combinata.

Provalo qui: http://jsfiddle.net/andrewwhitaker/hAM9H/

IMHO, un modo ancora più semplice per rilevare che l’utente ha cambiato la casella combinata (senza dover modificare il codice sorgente combobox completamento automatico dell’interfaccia jQuery) è la seguente; questo funziona per me. È ripetitivo se ne hai molti, anche se sicuramente c’è un modo per fare il refactoring. Grazie a tutti coloro che hanno studiato e spiegato questo widget a lungo, qui e altrove.

 $("#theComboBox").combobox({ select: function (event, ui) { alert("the select event has fired!"); } } ); 

Nel plugin ui.combobox:

ho aggiunto alla fine del metodo select:

 $(input).trigger("change", ui); 

ho aggiunto prima “var input …”:

 select.attr('inputId', select.attr('id') + '_input'); 

dopo, per avere un evento onchange funzionale … su ui.combobox ho commentato il metodo di modifica e ho spostato il suo codice sul metodo checkval che estende ui.autocomplete:

 $.extend( $.ui.autocomplete, { checkVal: function (select) { var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), valid = false; $(select).children("option").each(function () { if ($(this).text().match(matcher)) { this.selected = valid = true; return false; } }); if (!valid) { // remove invalid value, as it didn't match anything $(this).val(""); $(select).val(""); $(this).data("autocomplete").term = ""; $(this).data("autocomplete").close(); } } }); 

e ho codificato il metodo di cambio di input come di seguito:

 var oCbo = ('#MyCbo').combobox(); $('#' + oCbo.attr('inputId')).change(function () { // from select event : check if value exists if (arguments.length < 2) { $.ui.autocomplete.checkVal.apply(this, [oCbo]); } // YOUR CODE HERE }); 

Dice nella sezione “Eventi” della documentazione, che gestisci una modifica come questa …

 $( ".selector" ).autocomplete({ change: function(event, ui) { ... } }); 

Questo sembra funzionare per me

 if('function' == typeof(callback = ui.item.option.parentElement.onchange)) callback.apply(this, []); 

appena prima

 self._trigger("selected", event, { 

modo più semplice (IMHO), se si sta distribuendo combobox come widget:

  1. trova il metodo “_create” nel widget

  2. al suo interno cerca “autocomplete” (dove l’input è gestito)

  3. aggiungi (usa) il metodo “seleziona” per ottenere i tuoi dati: ui.item.value

 (Function ($) {
 $ .widget ("ui.combobox", {
     // opzioni predefinite
     opzioni: {
     // le tue opzioni ....
     },
     _create: function () {

     // qualche codice ....

     // questo è l'input che cerchi
     input = $ ("")
     .appendTo (wrapper)
     .val (valore)
     .addClass ("ui-state-default")

     // questo è il completamento automatico che stai cercando
     .autocomplete ({
         ritardo: 0,
         minLength: 0,
         fonte: funzione (richiesta, risposta) {
         // qualche codice ...
         },

         // questo è il metodo scelto che cerchi ...
         seleziona: function (event, ui) {

         // questo è il tuo valore selezionato
         console.log (ui.item.value);
         },
         change: function (event, ui) {

         // qualche codice ...
         }
     })
     // resto del codice
     },

     destroy: function () {
     this.wrapper.remove ();
     this.element.show ();
     $ .Widget.prototype.destroy.call (questo);
     }
 });

In effetti, c’è già un “hook” per l’evento onchange.

Basta modificare la seguente riga per la chiamata al metodo o il callback che si desidera:

 autocompletechange: "_removeIfInvalid" 
 $("#theComboBox").combobox({ select: function (event, ui) { alert("the select event has fired!"); } } 

);