jQuery UI Combobox on Exchange

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

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

quand la valeur change, elle Alerte la valeur mise à jour.

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

31
demandé sur Andrew Whitaker 2011-01-21 18:03:48

8 réponses

le source de l'exemple de combobox est tout à fait juste là dans l'exemple. J'avais déclencher l' change cas de la sous-jacentes sélectionnez en modifiant le code source comme ceci (modification de l' select gestionnaire d'événement à l'intérieur de la saisie semi-automatique d'initialisation à l'intérieur du plugin):

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

et ensuite définir un gestionnaire d'événement pour l' change événement select:

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

Malheureusement cela ne fonctionne pas exactement de la même manière que la normale select.change événement: il sera le déclencheur même vous sélectionnez le même élément de la liste déroulante.

ici: http://jsfiddle.net/andrewwhitaker/hAM9H/

49
répondu Andrew Whitaker 2012-08-10 12:14:58

IMHO, une façon encore plus simple de détecter l'Utilisateur a changé le combobox (sans avoir à modifier le code source jQuery UI autocomplete combobox) est comme suit; cela fonctionne pour moi. C'est répétitif si vous en avez beaucoup, bien qu'il y ait sûrement un moyen de les reformuler. 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
répondu David Barrows 2013-08-25 11:39:55

Dans l'interface utilisateur.combobox plugin:

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

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

j'ai ajouté avant le "var entrée ...":

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

après, pour avoir un événement onchange fonctionnel... sur l'interface utilisateur.combobox i a commenté la méthode change et a déplacé son code vers la méthode checkval qui étend ui.la saisie semi-automatique :

$.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é le changement d'entrée de la méthode 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
répondu ccyborg 2012-04-16 13:01:38

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

$( ".selector" ).autocomplete({
   change: function(event, ui) { ... }
});
0
répondu JasCav 2011-01-21 15:47:26

Cela semble fonctionner pour moi

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

juste avant

self._trigger("selected", event, {
0
répondu Oscar Nevarez 2012-01-27 00:11:58

la manière la plus simple (IMHO), si vous utilisez combobox comme widget:

  1. trouver la méthode" _create " dans widget

  2. à l'intérieur de rechercher pour "saisie semi-automatique" (où l'entrée est géré)

  3. ajouter (utiliser) la méthode "select" pour obtenir vos données: ui.article.valeur


(function($){
$.widget( "ui.combobox", {
    // default options
    options: {
    //your options ....
    },
    _create: function() {

    //some code ....

    //this is input you look for
    input = $( "" )
    .appendTo( wrapper )
    .val( value )
    .addClass( "ui-state-default" )

    //this is autocomplete you look for
    .autocomplete({
        delay: 0,
        minLength: 0,
        source: function( request, response ) {
        //some code ...
        },

        //this is select method you look for ...
        select: function( event, ui ) {

        //this is your selected value
        console.log(ui.item.value);
        },
        change: function( event, ui ) {

        //some code ...
        }
    })
    //rest of code
    },

    destroy: function() {
    this.wrapper.remove();
    this.element.show();
    $.Widget.prototype.destroy.call( this );
    }
});
0
répondu Jeffz 2013-04-26 08:57:01

En fait, il y a déjà un "crochet" pour l'événement onchange.

il suffit de changer la ligne suivante pour la méthode call ou le callback que vous voulez:

autocompletechange: "_removeIfInvalid"
0
répondu Thermech 2014-01-08 17:01:21
$("#theComboBox").combobox({ 
    select: function (event, ui) { 
        alert("the select event has fired!"); 
    } 
}

);

0
répondu Jagdish 2014-01-21 05:51:30