web-dev-qa-db-fra.com

jquery UI Combobox ONCHANGE

comment puis-je attacher une fonction onchange dans une liste déroulante jqueryUI? Voici mon code:

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

Lorsque la valeur change, cela alertera la valeur mise à jour.

Toute aide s'il vous plaît .. :)

jqueryjquery-uijquery-ui-autocomplete
31
Vincent Dagpin

La liste des exemples de combobox est tout à fait dans cet exemple. Je déclencherais l'événement change de la sélection sous-jacente en modifiant le code source comme suit (en modifiant le gestionnaire d'événements select dans l'initialisation de la saisie semi-automatique dans le plug-in):

/* 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 change régulier de select:

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

Malheureusement, cela ne fonctionnera pas exactement de la même manière que l'événement select.change normal: il déclenchera même la sélection du même élément dans la liste déroulante.

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

49
Andrew Whitaker

IMHO, un moyen encore plus simple de détecter l'utilisateur a changé la liste déroulante (sans avoir à ajuster le code source de la liste déroulante autocomplète jQuery UI) est la suivante; cela fonctionne pour moi. C'est répétitif si vous en avez beaucoup, bien qu'il y ait sûrement un moyen de le refactoriser. Merci à tous ceux qui ont étudié et expliqué ce widget en détail ici et ailleurs.

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

Dans le plugin ui.combobox:

j'ai ajouté à la fin de la méthode select:

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

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

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

après, pour avoir un événement onchange fonctionnel ... sur ui.combobox, j'ai commenté la méthode de changement 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 ci-dessous:

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

Cela semble fonctionner pour moi

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

juste avant

self._trigger("selected", event, {
0
Oscar Nevarez
$("#theComboBox").combobox({ 
    select: function (event, ui) { 
        alert("the select event has fired!"); 
    } 
}

)

0
Jagdish

Il est dit dans la section "Evénements" de la documentation que vous gérez un changement comme ceci ...

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

En fait, il existe déjà un "hook" pour l'événement onchange. 

Il suffit de modifier la ligne suivante pour l'appel de méthode ou le rappel souhaité:

autocompletechange: "_removeIfInvalid"
0
Thermech

manière la plus simple (IMHO), si vous déployez la combobox en tant que widget:

  1. trouve la méthode "_create" dans le widget

  2. à l'intérieur de celui-ci, recherchez "autocomplete" (où l'entrée est gérée)

  3. ajoutez (utilisez) la méthode "select" pour obtenir vos données: ui.item.value


 (fonction ($) {
 $. widget ("ui.combobox", {
 // options par défaut 
 options: {
 // vos options .... 
}, 
 _create: function () {

 // du code ....

 // c'est une entrée que vous recherchez 
 input = $ (" ") 
 .appendTo (wrapper) 
 .val (valeur) 
 .addClass (" ui-state-default ") 

 // c'est la saisie semi-automatique que vous recherchez. autocomplete ({
 delay: 0, 
 minLength: 0, 
 source: function (demande, réponse) {
 // du code ...
}, 

 // c'est la méthode de sélection que vous recherchez ...
 select: function (événement, ui) {

 // c'est la valeur sélectionnée 
 console.log (ui.item.value) ; 
}, 
 change: fonction (événement, ui) {

 // du code ...
} 
}) 
 // reste du code 
}, 

 destroy: function () {
 this.wrapper.remove (); 
 this.element.show (); 
 $ .Widget.prototype.destroy. appelez (ceci); 
 } 
});
0
Jeffz