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.. :)
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.
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!");
}
}
);
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
});
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) { ... }
});
Cela semble fonctionner pour moi
if('function' == typeof(callback = ui.item.option.parentElement.onchange))
callback.apply(this, []);
juste avant
self._trigger("selected", event, {
la manière la plus simple (IMHO), si vous utilisez combobox comme widget:
trouver la méthode" _create " dans widget
à l'intérieur de rechercher pour "saisie semi-automatique" (où l'entrée est géré)
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 ); } });
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"
$("#theComboBox").combobox({
select: function (event, ui) {
alert("the select event has fired!");
}
}
);