jQuery UI Combobox ONCHANGE
Как я могу прикрепить функцию onchange в combobox jqueryUI? Вот мой код:
$(".cmbBox").combobox({
change:function(){
alert($(this).val());
}
});
когда значение изменится, оно предупредит обновленное значение.
любая помощь, пожалуйста.. :)
8 ответов
источник примера combobox все в порядке в Примере. Я бы запустил change
событие базового выбора путем изменения исходного кода следующим образом (изменение select
обработчик событий внутри инициализации автозаполнения внутри плагина):
/* Snip */
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
select.trigger("change");
},
/* Snip */
а затем определите обработчик событий для обычного change
событие select
:
$(".cmbBox").change(function() {
alert(this.value);
});
к сожалению, это не работает точно так же как обычный тег select.change
событие: оно вызовет даже вы выбираете тот же элемент из combobox.
Попробуйте здесь:http://jsfiddle.net/andrewwhitaker/hAM9H/
IMHO, еще более простой способ определить, что пользователь изменил combobox (без необходимости настройки исходного кода автозаполнения jQuery UI), выглядит следующим образом; это работает для меня. Это повторяется, если у вас их много, хотя, конечно, есть способ рефакторинга. Спасибо всем, кто изучил и подробно объяснил этот виджет, здесь и в других местах.
$("#theComboBox").combobox({
select: function (event, ui) {
alert("the select event has fired!");
}
}
);
в пользовательском интерфейсе.плагин комбобокс :
Я добавил в конце метода select:
$(input).trigger("change", ui);
Я добавил перед входом " var ...":
select.attr('inputId', select.attr('id') + '_input');
после, чтобы иметь функциональное событие onChange... на ui.combobox я прокомментировал метод change и переместил его код в метод checkval, который расширяет пользовательский интерфейс.автозаполнение :
$.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();
}
}
});
и я закодировал метод изменения ввода, как показано ниже:
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
});
в разделе "События" документации говорится, что вы ручка изменения такой...
$( ".selector" ).autocomplete({
change: function(event, ui) { ... }
});
Это, кажется, работает для меня
if('function' == typeof(callback = ui.item.option.parentElement.onchange))
callback.apply(this, []);
перед
self._trigger("selected", event, {
самый простой способ (IMHO), если вы развертываете combobox как виджет:
найти метод "_create" в виджете
внутри него ищите "автозаполнение" (где ввод управляется)
add (use) "select" метод для получения данных: ui.пункт.значение
(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 ); } });
фактически, уже есть" крюк " для события onchange.
просто измените следующую строку для вызова метода или обратного вызова, который вы хотите:
autocompletechange: "_removeIfInvalid"
$("#theComboBox").combobox({
select: function (event, ui) {
alert("the select event has fired!");
}
}
);