jquery UI Combobox ONCHANGE

Question

Comment puis-je attacher une fonction onchange dans une combobox jqueryUI ? Voici mon code :

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

Lorsque la valeur changera, il signalera la valeur mise à jour.

Toute aide est la bienvenue :)

Answer 1

La source de l'exemple de combobox se trouve dans l'exemple. Je déclencherais le change de la sélection sous-jacente en modifiant le code source de la manière suivante (en changeant la balise select gestionnaire d'événement dans l'initialisation de l'autocomplétion dans le plugin) :

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

puis définissez un gestionnaire d'événements pour l'événement régulier change de l'événement select :

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

Malheureusement, cela ne fonctionnera pas exactement de la même manière que la méthode normale d'évaluation des risques. select.change : il se déclenchera même si vous sélectionnez le même élément dans la combobox.

Essayez-le ici : http://jsfiddle.net/andrewwhitaker/hAM9H/

Answer 2

À mon avis, un moyen encore plus simple de détecter que l'utilisateur a modifié la combobox (sans avoir à modifier le code source de la combobox jQuery UI autocomplete) est le suivant ; cela fonctionne pour moi. C'est répétitif si vous en avez beaucoup, mais il y a sûrement un moyen de refactorer. Merci à tous ceux qui ont étudié et expliqué longuement ce widget, ici et ailleurs.

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

Answer 3

Dans le plugin ui.combobox :

J'ai ajouté à la fin de la méthode de sélection :

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

j'ai ajouté avant le "var input ..." :

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

ensuite, pour avoir un événement onchange fonctionnel... sur ui.combobox j'ai commenté la méthode change et déplacé son code vers la méthode checkval qui étend 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();
            }
        }
});

et j'ai codé la méthode de changement d'entrée comme suit :

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
});

Answer 4

Il est dit dans la section "Événements" de la documentation, que vous gérer un changement comme ça...

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

Answer 5

Cela semble fonctionner pour moi

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

juste avant

self._trigger("selected", event, {