Javascript jQuery AutoComplete 选择更改后触发？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2870077/
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 AutoComplete select firing after change?
提问by Zarigani
I'm using the jQuery UI AutoComplete control(just updated to jQuery UI 1.8.1). Whenever the user leaves the text box, I want to set the contents of the text box to a known-good value and set a hidden ID field for the value that was selected. Additionally, I want the page to post back when the contents of the text box are changed.
我正在使用jQuery UI AutoComplete 控件（刚刚更新到 jQuery UI 1.8.1）。每当用户离开文本框时，我都想将文本框的内容设置为已知良好的值，并为选定的值设置一个隐藏的 ID 字段。此外，当文本框的内容更改时，我希望页面回发。
Currently, I am implementing this by having the autocomplete select event set the hidden id and then a change event on the text box which sets the textbox value and, if necessary, causes a post back.
目前，我通过让自动完成选择事件设置隐藏 id，然后在文本框上设置文本框值的更改事件来实现这一点，并在必要时导致回发。
If the user just uses the keyboard, this works perfectly. You can type, use the up and down arrows to select a value and then tab to exit. The select event fires, the id is set and then the change event fires and the page posts back.
如果用户只使用键盘，这非常有效。您可以键入，使用向上和向下箭头选择一个值，然后按 Tab 键退出。select 事件触发，id 被设置，然后 change 事件触发，页面回发。
If the user starts typing and then uses the mouse to pick from the autocomplete options though, the change event fires (as focus shifts to the autocomplete menu?) and the page posts back before the select event has a chance to set the ID.
如果用户开始输入然后使用鼠标从自动完成选项中选择，则更改事件将触发（当焦点转移到自动完成菜单时？）并且页面在选择事件有机会设置 ID 之前回发。
Is there a way to get the change event to not fire until after the select event, even when a mouse is used?
有没有办法让更改事件直到选择事件之后才触发，即使使用鼠标也是如此？
$(function() {
var txtAutoComp_cache = {};
var txtAutoComp_current = { label: $('#txtAutoComp').val(), id: $('#hiddenAutoComp_ID').val() };
$('#txtAutoComp').change(function() {
if (this.value == '') { txtAutoComp_current = null; }
if (txtAutoComp_current) {
this.value = txtAutoComp_current.label ? txtAutoComp_current.label : txtAutoComp_current;
$('#hiddenAutoComp_ID').val(txtAutoComp_current.id ? txtAutoComp_current.id : txtAutoComp_current);
} else {
this.value = '';
$('#hiddenAutoComp_ID').val('');
}
// Postback goes here
});
$('#txtAutoComp').autocomplete({
source: function(request, response) {
var jsonReq = '{ "prefixText": "' + request.term.replace('\', '\\').replace('"', '\"') + '", "count": 0 }';
if (txtAutoComp_cache.req == jsonReq && txtAutoComp_cache.content) {
response(txtAutoComp_cache.content);
return;
}
$.ajax({
url: 'ajaxLookup.asmx/CatLookup',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: jsonReq,
type: 'POST',
success: function(data) {
txtAutoComp_cache.req = jsonReq;
txtAutoComp_cache.content = data.d;
response(data.d);
if (data.d && data.d[0]) { txtAutoComp_current = data.d[0]; }
}
});
},
select: function(event, ui) {
if (ui.item) { txtAutoComp_current = ui.item; }
$('#hiddenAutoComp_ID').val(ui.item ? ui.item.id : '');
}
});
});
回答by ndbroadbent
You can solve this by implementing your change event as an autocomplete option, just like select, instead of using jQuery's change() function.
您可以通过将更改事件实现为自动完成选项来解决这个问题，就像选择一样，而不是使用 jQuery 的 change() 函数。
You can see the list of events at the autocomplete demo & documentation page. It states that the change event is always fired after the close event, which I presume is fired after the select event. Have a look at the source for 'combobox' to see an example change event hook.
您可以在自动完成演示和文档页面查看事件列表。它指出 change 事件总是在 close 事件之后触发，我认为它是在 select 事件之后触发的。查看“组合框”的源代码以查看示例更改事件挂钩。
回答by Poornima
It worked for me on mouse select when i did this:
当我这样做时，它在鼠标选择上对我有用：
focus: function (event, ui) {
$j(".tb").val(ui.item.value);
return true;
}
This causes the TextBox text to change on mouse focus events, just like the way it happens on keyboard events. And when we select an item, it triggers selection changed.
这会导致 TextBox 文本在鼠标焦点事件上发生变化，就像它在键盘事件上发生的方式一样。当我们选择一个项目时，它会触发选择更改。
回答by Nathan Taylor
I don't know about preventing the change event from firing, but you could easily throw some conditionals in your change event that makes sure the hidden field has been set and that the TextBox currently has avalue.
我不知道防止更改事件烧制而成，但你可以很容易地抛出一些条件语句中的更改事件确保隐藏字段已经被设置和文本框目前有一个值。
