34

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

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

当值发生变化时，它会提醒更新的值。

任何帮助请.. :)

4

8 回答 8

51

组合框示例源就在示例中。我会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/

于 2011-01-21T17:25:42.507 回答
24

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

$("#theComboBox").combobox({ 
        select: function (event, ui) { 
            alert("the select event has fired!"); 
        } 
    }
);
于 2013-08-25T11:39:55.837 回答
1

进入 ui.combobox 插件：

我在选择方法的末尾添加：

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

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

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

之后，有一个功能性的 onchange 事件...在 ui.combobox 我评论了 change 方法并将其代码移动到扩展 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
});
于 2012-04-16T11:56:07.397 回答
0

它在文档的“事件”部分中说，您处理这样的更改......

$( ".selector" ).autocomplete({
   change: function(event, ui) { ... }
});
于 2011-01-21T15:47:26.920 回答
0

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

只需更改您想要的方法调用或回调的以下行：

autocompletechange: "_removeIfInvalid"
于 2014-01-08T17:01:21.330 回答
0

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

  1. 在小部件中找到“_create”方法

  2. 在其中寻找“自动完成”（管理输入的地方）

  3. 添加（使用）“选择”方法来获取您的数据：ui.item.value

(函数($){
$.widget("ui.combobox", {
    // 默认选项
    选项： {
    //你的选择....
    },
    _创建：函数（）{

    //一些代码....

    //这是您要查找的输入
    输入 = $( "" )
    .appendTo（包装）
    .val（值）
    .addClass("ui-state-default")

    //这是您要查找的自动完成功能
    .自动完成（{
        延迟：0，
        最小长度：0，
        来源：功能（请求，响应）{
        //一些代码...
        },

        //这是您要查找的选择方法...
        选择：函数（事件，用户界面）{

        //这是您选择的值
        控制台.log(ui.item.value);
        },
        改变：函数（事件，用户界面）{

        //一些代码...
        }
    })
    //其余代码
    },

    销毁：函数（）{
    this.wrapper.remove();
    this.element.show();
    $.Widget.prototype.destroy.call(this);
    }
});
于 2013-04-26T08:57:01.473 回答
0

这似乎对我有用

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

就在之前

self._trigger("selected", event, {
于 2012-01-27T00:11:58.713 回答
0 
$("#theComboBox").combobox({ 
    select: function (event, ui) { 
        alert("the select event has fired!"); 
    } 
}

);

于 2014-01-21T05:51:30.507 回答