JQuery 自动完成：如何强制从列表（键盘）中选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11681292/
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: how to force selection from list (keyboard)
提问by Ali B
I am using JQuery UI autocomplete. Everything works as expected, but when I cycle with the up/down keys on the keyboard, I notice that the textbox is filled with items in the list as expected, but when I reach the end of the list and hit the down arrow one more time, the original term that I typed shows up, which basically allows the user to submit that entry.
我正在使用 JQuery UI 自动完成。一切都按预期工作，但是当我使用键盘上的向上/向下键循环时，我注意到文本框按预期填充了列表中的项目，但是当我到达列表末尾并再次按下向下箭头时时间，我输入的原始术语出现了，它基本上允许用户提交该条目。
My question: Is there a simple way to limit the selection to the items in the list, and remove the text in the input from the keyboard selection?
我的问题：是否有一种简单的方法可以将选择范围限制为列表中的项目，并从键盘选择中删除输入中的文本？
eg: if I have a list that contains {'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'}, if the user types 'app', I will automatically select the first item in the list ('Apples (AA)' here), but if the user presses the down arrow, 'app' shows up again in the textbox. How can I prevent that?
例如：如果我有一个包含 的列表{'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'}，如果用户键入“app”，我将自动选择列表中的第一项（此处为“Apples (AA)”），但如果用户按下向下箭头，则“app”再次出现在文本框中。我怎样才能防止这种情况？
Thanks.
谢谢。
回答by Saurabh
for force selection, you can use "change" event of Autocomplete
对于强制选择，您可以使用自动完成的“更改”事件
var availableTags = [
"ActionScript",
"AppleScript"
];
$("#tags").autocomplete({
source: availableTags,
change: function (event, ui) {
if(!ui.item){
//http://api.jqueryui.com/autocomplete/#event-change -
// The item selected from the menu, if any. Otherwise the property is null
//so clear the item for force selection
$("#tags").val("");
}
}
});
回答by Richard
Both of these other answers in combination work well.
这两个其他答案结合使用效果很好。
Also, you can use the event.target to clear the text. This helps when you are adding auto-complete to multiple controls or when you don't want to type in the selector twice (maintainability issues there).
此外，您可以使用 event.target 清除文本。当您向多个控件添加自动完成功能或不想在选择器中输入两次（那里的可维护性问题）时，这会有所帮助。
$(".category").autocomplete({
source: availableTags,
change: function (event, ui) {
if(!ui.item){
$(event.target).val("");
}
},
focus: function (event, ui) {
return false;
}
});
It should be noted, however, that the even though the "focus" returns false, the up/down keys will still select the value. Cancelling this event only cancels the replacing of the text. So, "j", "down", "tab" will still select the first item that matches "j". It just won't show it in the control.
然而，应该注意的是，即使“焦点”返回 false，向上/向下键仍将选择该值。取消此事件只会取消文本的替换。因此，“j”、“down”、“tab”仍将选择与“j”匹配的第一个项目。它只是不会在控件中显示它。
回答by Ricardo Alvaro Lohmann
"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."
"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."
reference
On focus event:
参考
焦点事件：
focus: function(e, ui) {
return false;
}
回答by callum.bennett
Define a variable
定义一个变量
var inFocus = false;
Add the following events to your input
将以下事件添加到您的输入中
.on('focus', function() {
inFocus = true;
})
.on('blur', function() {
inFocus = false;
})
And attach a keydown event to the window
并将 keydown 事件附加到窗口
$(window)
.keydown(function(e){
if(e.keyCode == 13 && inFocus) {
e.preventDefault();
}
});
