it-swarm.com.ru

jQuery UI Combobox ONCHANGE

как я могу прикрепить функцию onchange в поле со списком jqueryUI? Вот мой код:

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

Когда значение изменится, оно сообщит об обновленном значении.

Любая помощь, пожалуйста .. :)

31
Vincent Dagpin

Пример примера с выпадающим списком в порядке. Я бы вызвал событие change базового выбора, изменив исходный код следующим образом (изменив обработчик события select внутри инициализации автозаполнения внутри плагина):

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

и затем определите обработчик события для обычного события changeselect:

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

К сожалению, это не будет работать точно так же, как обычное событие select.change: оно сработает, даже если вы выберете тот же элемент в выпадающем списке.

Попробуйте это здесь: http://jsfiddle.net/andrewwhitaker/hAM9H/

49
Andrew Whitaker

ИМХО, еще более простой способ обнаружить, что пользователь изменил комбинированный список (без необходимости настраивать исходный код комбинированного списка автозаполнения пользовательского интерфейса jQuery), заключается в следующем; это работает для меня. Это неприятно, если у вас их много, хотя, безусловно, есть способ рефакторинга. Спасибо всем, кто подробно изучил и объяснил этот виджет здесь и в других местах.

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

В плагин ui.combobox:

я добавил в конце метода выбора:

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

я добавил перед "var input ...": 

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

после, чтобы иметь функциональное событие onchange ... на ui.combobox я прокомментировал метод change и переместил его код в метод checkval, который расширяет 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();
            }
        }
});

и я закодировал метод изменения ввода, как показано ниже:

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

Кажется, это работает для меня

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

как раз перед

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

);

0
Jagdish

В разделе «События» документации говорится, что вы обрабатываете изменение вот так ...

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

На самом деле, уже есть «крючок» для события onchange. 

Просто измените следующую строку для вызова метода или обратного вызова, который вы хотите:

autocompletechange: "_removeIfInvalid"
0
Thermech

самый простой способ (IMHO), если вы развертываете комбинированный список как виджет:

  1. найти метод "_create" в виджете

  2. внутри него ищите «автозаполнение» (где ввод управляется)

  3. добавить (использовать) метод "выбрать", чтобы получить ваши данные: ui.item.value

 (function ($) {
 $. widget ("ui.combobox", {
 // параметры по умолчанию 
 параметры: {
 // ваши параметры .... 
}, 
 _create: function () {

 // некоторый код ....

 // это ввод, который вы ищете 
 input = $ (" ") 
 .appendTo (оболочка) 
 .val (значение) 
 .addClass (" ui-state-default ") 

 // это автозаполнение, которое вы ищете 
. автозаполнение ({
 delay: 0, 
 minLength: 0, 
 source: function (request, response) {
 // некоторый код ...
}, 

 // это метод выбора, который вы ищете ...
 select: function (event, ui) {

 // это выбранное вами значение 
 console.log (ui.item.value) ; 
}, 
 change: function (event, ui) {

 // некоторый код ...
} 
}) 
 // остальная часть кода 
}, 

 destroy: function () {
 this.wrapper.remove (); 
 this.element.show (); 
 $ .Widget.prototype.destroy. вызов (это); 
 }} .__);. 
0
Jeffz