wake-up-neo.com

jquery UI Combobox ONCHANGE

wie kann ich eine onchange-Funktion in einer JqueryUI-Combobox anhängen? Hier ist mein Code:

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

Wenn sich der Wert ändert, wird der aktualisierte Wert benachrichtigt.

Hilfe bitte .. :)

jqueryjquery-uijquery-ui-autocomplete
31
Vincent Dagpin

Die Combobox-Beispielquelle ist in diesem Beispiel genau richtig. Ich würde das change -Ereignis des zugrunde liegenden select auslösen, indem ich den Quellcode wie folgt modifiziere (Ändern des select -Ereignis-Handlers innerhalb der Autocomplete-Initialisierung im Plugin):

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

und definieren Sie dann einen Ereignishandler für das reguläre change-Ereignis der select:

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

Leider funktioniert das nicht genauso wie das normale select.change -Ereignis: Es wird sogar ausgelöst, wenn Sie dasselbe Element aus der Combobox auswählen.

Probieren Sie es hier aus: http://jsfiddle.net/andrewwhitaker/hAM9H/

49
Andrew Whitaker

IMHO, eine noch einfachere Methode zum Erkennen, dass der Benutzer die Combobox geändert hat (ohne dass der jQuery UI-Autocomplete-Combobox-Quellcode angepasst werden muss), lautet wie folgt: das funktioniert für mich. Es ist eine Wiederholung, wenn Sie viele davon haben, obwohl es sicherlich eine Möglichkeit gibt, umzuformen. Vielen Dank an alle, die dieses Widget ausführlich studiert und erklärt haben, hier und anderswo.

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

In das ui.combobox-Plugin:

ich fügte am Ende der Auswahlmethode hinzu:

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

ich habe vor der "var-Eingabe ..." hinzugefügt: 

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

um ein funktionales onchange-ereignis ...

$.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();
            }
        }
});

und ich codierte die Eingabeänderungsmethode wie folgt:

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

Das scheint für mich zu funktionieren

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

kurz bevor

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

);

0
Jagdish

Im Abschnitt "Ereignisse" der Dokumentation heißt es, dass Sie eine Änderung durchführen so ...

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

In der Tat gibt es bereits einen "Haken" für das onchange-Ereignis. 

Ändern Sie einfach die folgende Zeile für den Methodenaufruf oder den gewünschten Rückruf:

autocompletechange: "_removeIfInvalid"
0
Thermech

einfachster Weg (IMHO), wenn Sie Combobox als Widget bereitstellen:

  1. finden Sie die Methode "_create" im Widget

  2. suchen Sie nach "Autovervollständigung" (wo die Eingabe verwaltet wird)

  3. add (use) "select" -Methode, um Ihre Daten zu erhalten: ui.item.value

 (Funktion ($) {
 $. Widget ("ui.combobox", {
 // Standardoptionen 
 Optionen: {
 // Ihre Optionen .... 
}, 
 _create: function () {

 // etwas Code ....

 // Dies ist die Eingabe, nach der Sie suchen 
 input = $ (" ") 
 .appendTo (wrapper) 
 .val (Wert) 
 .addClass (" ui-state-default ") 

 // Dies ist die automatische Vervollständigung, die Sie suchen 
.. Autovervollständigen ({
 Verzögerung: 0, 
 MinLänge: 0, 
 Quelle: Funktion (Anforderung, Antwort) {
 // etwas Code ...
}, 

 // Dies ist die ausgewählte Methode, nach der Sie suchen ...
 select: function (Ereignis, ui) {

 // Dies ist Ihr ausgewählter Wert 
 console.log (ui.item.value) ; 
}, 
 change: function (event, ui) {

 // etwas Code ...
} 
}) 
 // Rest des Codes 
}, 

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