javascript jQuery UI 自动完成：强制从列表中选择而无需修改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16379879/
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 autocomplete: enforce selection from list without modifications
提问by segFault
I am using the custom binding provided in Autocomplete combobox with Knockout JS template / JQuery
我正在使用自动完成组合框中提供的自定义绑定和 Knockout JS 模板/JQuery
I need to enforce that the user must select a value in the autocomplete list and after they select the value to not be able to add additional text to the select. I have searched but I cannot find an example of how to prevent additional text from being entered. It must stay editable incase they selected the wrong drop down but what they type must match 100% with a value from the list.
我需要强制用户必须在自动完成列表中选择一个值，并且在他们选择该值后无法向选择添加其他文本。我进行了搜索，但找不到有关如何防止输入其他文本的示例。如果他们选择了错误的下拉列表，但他们键入的内容必须与列表中的值 100% 匹配，它必须保持可编辑状态。
I found thisposting on jquery but its 9 months old and no one posted an answer.
我在 jquery 上发现了这个帖子，但它已经 9 个月大了，没有人发布答案。
回答by Irvin Dominin
There is no built in function to do what you want.
没有内置功能可以做你想做的事。
I made a simple project where using the autocomplete changeevent you must select the value from the autocomplete, if not the value is deleted.
我做了一个简单的项目，其中使用自动完成change事件，您必须从自动完成中选择值，否则将删除该值。
Change event
更改事件
Triggered when the field is blurred, if the value has changed.
如果值已更改，则在字段模糊时触发。
After the selection the field became disabled, and you can activate it using an activating anchor (for example).
选择后该字段被禁用，您可以使用激活锚点激活它（例如）。
Code:
代码：
$("#artist").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function (data) {
response(data[1]);
}
});
},
change: function (event, ui) {
if (ui.item == null || ui.item == undefined) {
$("#artist").val("");
$("#artist").attr("disabled", false);
} else {
$("#artist").attr("disabled", true);
}
}
});
$('#changeArtist').click(function (e) {
e.preventDefault();
$("#artist").attr("disabled", false);
});
Here is a fiddle: http://jsfiddle.net/IrvinDominin/nH4Nx/
这是一个小提琴：http: //jsfiddle.net/IrvinDominin/nH4Nx/
回答by crunch
This is an older post, but I think it's mildly incomplete from a UX perspective, due to the focus issue (it doesn't make the change until focus is removed from the input, in this case '#artist', fairly annoying), so I would add:
这是一篇较旧的帖子，但我认为从用户体验的角度来看，由于焦点问题，它有点不完整（直到焦点从输入中移除，它才会进行更改，在这种情况下为“#artist”，相当烦人），所以我要补充：
select: function (event, ui) {
$("#artist").attr("disabled", false);
}
so (let's assume it's a button we're trying to enable) that the user sees the enabled object immediately upon selection.
所以（让我们假设它是一个我们试图启用的按钮）用户在选择后立即看到启用的对象。
