jQuery UI Combobox ONCHANGE

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

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

когда значение изменится, оно предупредит обновленное значение.

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

31
jquery jquery-ui jquery-ui-autocomplete

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/

49

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

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

в пользовательском интерфейсе.плагин комбобокс :

Я добавил в конце метода 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
});
1

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

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

Это, кажется, работает для меня

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

перед

self._trigger("selected", event, {
0

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

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

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

  3. 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 );
    }
});
0

фактически, уже есть" крюк " для события onchange.

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

autocompletechange: "_removeIfInvalid"
0
$("#theComboBox").combobox({ 
    select: function (event, ui) { 
        alert("the select event has fired!"); 
    } 
}

);

0