Question

如何在jqueryUI组合框中附加onchange函数？这是我的代码：

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

当值更改时，它将提醒更新的值。

任何帮助请......：）

Answer 1

组合框示例源在示例中就可以了。我通过修改源代码来触发底层选择的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事件完全不同：即使您从组合框中选择相同的项目，它也会触发。

在此处试试：http://jsfiddle.net/andrewwhitaker/hAM9H/

Answer 2

恕我直言，一种更简单的方法来检测用户已更改组合框（无需调整jQuery UI自动完成组合框源代码）如下;这对我有用。如果你有很多它们是重复的，尽管有一种方法可以重构。感谢所有在这里和其他地方详细研究和解释过这个小部件的人。

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

Answer 3

进入ui.combobox插件：

我在select方法的末尾添加了：

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

我在“var input ...”之前添加了：

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

之后，要在ui.combobox上有一个函数onchange事件...我评论了更改方法并将其代码移动到扩展ui.autocomplete的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
});

Answer 4

在文档的“事件”部分中，您handle a change喜欢这样......

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

Answer 5

这似乎对我有用

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

之前

self._trigger("selected", event, {

Answer 6

最简单的方法（恕我直言），如果你将组合框架部署为小部件：

在小部件中找到“_create”方法
内部查找“自动填充”（管理输入）
添加（使用）“select”方法以获取您的数据：ui.item.value


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

Answer 7

事实上，onchange事件已经有了一个“钩子”。

只需更改方法调用或所需回调的以下行：

autocompletechange: "_removeIfInvalid"

Answer 8

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

）;

jquery UI Combobox ONCHANGE

8 个答案: