jquery UI 组合框 ONCHANGE
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4760285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery UI Combobox ONCHANGE
提问by Vincent Dagpin
how can I attach an onchange function in a jqueryUI combobox? Here is my code:
如何在 jqueryUI 组合框中附加 onchange 函数？这是我的代码：
$(".cmbBox").combobox({
change:function(){
alert($(this).val());
}
});
When the value changes, it will alert the updated value.
当值发生变化时，它会提醒更新的值。
Any help please.. :)
任何帮助请.. :)
回答by Andrew Whitaker
The combobox example source is all right there in the example. I'd trigger the changeevent of the underlying select by modifying the source code like this (changing the selectevent handler inside autocomplete initialization inside the plugin):
组合框示例源在示例中就在那里。我会change通过像这样修改源代码来触发底层选择的select事件（在插件内的自动完成初始化中更改事件处理程序）：
/* Snip */
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
select.trigger("change");
},
/* Snip */
and then define an event handler for the regular changeevent of the select:
然后为 的常规change事件定义一个事件处理程序select：
$(".cmbBox").change(function() {
alert(this.value);
});
Unfortunately this won't work exactly the same way as the normal select.changeevent: it will trigger even you select the same item from the combobox.
不幸的是，这与正常select.change事件的工作方式不同：即使您从组合框中选择相同的项目，它也会触发。
Try it out here: http://jsfiddle.net/andrewwhitaker/hAM9H/
回答by David Barrows
IMHO, an even simpler way to detect the user has changed the combobox (without having to tweak the jQuery UI autocomplete combobox source code) is as follows; this works for me. It's repetitious if you've got lots of them, though surely there's a way to refactor. Thanks to all who have studied and explained this widget at length, here and elsewhere.
恕我直言，一种更简单的方法来检测用户更改了组合框（无需调整 jQuery UI 自动完成组合框源代码）如下；这对我有用。如果你有很多，那就是重复的，尽管肯定有一种重构的方法。感谢所有在这里和其他地方详细研究和解释这个小部件的人。
$("#theComboBox").combobox({
select: function (event, ui) {
alert("the select event has fired!");
}
}
);
回答by ccyborg
Into the ui.combobox plugin :
进入 ui.combobox 插件：
i added at the end of the select method :
我在 select 方法的末尾添加了：
$(input).trigger("change", ui);
i added before the "var input ..." :
我在“var input ...”之前添加了：
select.attr('inputId', select.attr('id') + '_input');
after, to have a functional onchange event... on ui.combobox i commented the change method and moved its code to the checkval method that extends ui.autocomplete :
之后，为了有一个功能性的 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();
}
}
});
and i coded the input change method as below :
我将输入更改方法编码如下：
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
});
回答by Jeffz
simplest way (IMHO), if you are deploying combobox as widget:
最简单的方法（恕我直言），如果您将组合框部署为小部件：
find "_create" method in widget
inside of it look for "autocomplete" (where input is managed)
add (use) "select" method to get your data: ui.item.value
在小部件中找到“_create”方法
在它里面寻找“自动完成”（输入被管理的地方）
添加（使用）“选择”方法来获取您的数据：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 );
}
});
回答by Thermech
In fact, there's already a "hook" for the onchange event.
事实上，onchange 事件已经有了一个“钩子”。
Just change the following line for the method call or the callback that you want:
只需更改您想要的方法调用或回调的以下行：
autocompletechange: "_removeIfInvalid"
回答by Jagdish
$("#theComboBox").combobox({
select: function (event, ui) {
alert("the select event has fired!");
}
}
);
);
回答by JasCav
It says in the "Events" section of the documentation, that you handle a changelike this...
它在文档的“事件”部分说，您处理这样的更改......
$( ".selector" ).autocomplete({
change: function(event, ui) { ... }
});
回答by Oscar Nevarez
This seems to work for me
这似乎对我有用
if('function' == typeof(callback = ui.item.option.parentElement.onchange))
callback.apply(this, []);
just before
就在之前
self._trigger("selected", event, {
