jQuery 自动完成不允许自由文本输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2909077/
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
Autocomplete disallow free text entry?
提问by JK.
Is it possible to disallow free text entry in the JQuery UI autocomplete widget?
是否可以禁止在 JQuery UI 自动完成小部件中输入自由文本？
eg I only want the user to be allowed to select from the list of items that are presented in the autocomplete list, and dont want them to be able to write some random text.
例如，我只希望允许用户从自动完成列表中显示的项目列表中进行选择，并且不希望他们能够编写一些随机文本。
I didn't see anything in the demos/docs describing how to do this.
我在演示/文档中没有看到任何描述如何执行此操作的内容。
http://jqueryui.com/demos/autocomplete/
http://jqueryui.com/demos/autocomplete/
I'm using autocomplete like this
我正在使用这样的自动完成功能
$('#selector').autocomplete({
source: url,
minlength: 2,
select: function (event, ui) {
// etc
}
采纳答案by Aaron Janes
One way would be to use additional validation on form submit (if you are using a form) to highlight an error if the text isn't one of the valid option.
一种方法是在表单提交时使用额外的验证（如果您使用的是表单）以在文本不是有效选项之一时突出显示错误。
Another way would be to attach to the auto complete's change event which will get fired even if an options isn't selected. You can then do validation to ensure the user input is in your list or display an error if it is not.
另一种方法是附加到自动完成的更改事件，即使未选择选项，该事件也会被触发。然后，您可以进行验证以确保用户输入在您的列表中，否则显示错误。
回答by Neils
According to the API documentation, the changeevent's uiproperty is null if the entry was not chosen from the list, so you can disallow free text as simply as this:
根据API 文档，如果条目未从列表中选择，则change事件的ui属性为 null，因此您可以像这样简单地禁止自由文本：
change: function(event, ui) {
if (ui.item == null) {
event.currentTarget.value = '';
event.currentTarget.focus();
}
}
回答by Raja
If you want the user to just get the item from the list then use autocomplete combobox.
如果您希望用户只从列表中获取项目，请使用自动完成组合框。
http://jqueryui.com/demos/autocomplete/#combobox
http://jqueryui.com/demos/autocomplete/#combobox
HTH
HTH
回答by Mike
I used the combobox module which gives you a "down arrow" button. Then to the input tag, just add the following to the input tag right around line 41 (depending on your version of the combobox http://jqueryui.com/demos/autocomplete/#combobox)
我使用了组合框模块，它为您提供了一个“向下箭头”按钮。然后到输入标签，只需将以下内容添加到第 41 行附近的输入标签（取决于您的组合框版本http://jqueryui.com/demos/autocomplete/#combobox）
input.attr("readonly", "readonly");
input.attr("只读", "只读");
Then add code so that if the user clicks the input box, it'll show the drop list.
然后添加代码，以便如果用户单击输入框，它将显示下拉列表。
For my purposes, I added a readonly flag that I can pass in to the module so if I need it readonly, I can turn it on/off as well.
出于我的目的，我添加了一个可以传递给模块的只读标志，因此如果我需要它只读，我也可以打开/关闭它。
回答by Joe
Old question, but here:
老问题，但在这里：
var defaultVal = '';
$('#selector').autocomplete({
source: url,
minlength: 2,
focus: function(event, ui) {
if (ui != null) {
defaultVal = ui.item.label;
}
},
close: function(event, ui) {
$('#searchBox').val(defaultVal);
}
});
回答by user7793758
If you would like to restrict the user to picking a recommendation from the autocomplete list, try defining the close function like this. The close function is called when the results drop down closes, if the user selected from the list, then event.currentTarget is defined, if not, then the results drop down closed without the user selecting an option. If they do not select an option, then I reset the input to blank.
如果您想限制用户从自动完成列表中选择推荐，请尝试像这样定义关闭函数。当结果下拉关闭时调用 close 函数，如果用户从列表中选择，则 event.currentTarget 被定义，如果没有，则结果下拉关闭，用户不选择选项。如果他们没有选择一个选项，那么我将输入重置为空白。
/**
* The jQuery UI plugin autocomplete
*/
$.widget( "ui.autocomplete", $.ui.autocomplete, {
options: {
close: function( event, ui ) {
if (typeof event.currentTarget == 'undefined') {
$(this).val("");
}
}
}
});
回答by PodTech.io
The combobox option works well if you are using a set list, however if you have a dynamic generated list via a json get, then you can only capture the data on change.
如果您使用的是集合列表，则组合框选项效果很好，但是如果您有通过 json get 动态生成的列表，那么您只能捕获更改的数据。
Full example with additional parameters below.
下面带有附加参数的完整示例。
$("#town").autocomplete(
{
select: function( event, ui ) {
$( "#town" ).val( ui.item.value );
return false;
},
focus: function( event, ui ) {
$( "#town" ).val( ui.item.label );
return false;
},
change: function(event, ui) {
if (!ui.item) {
$("#town").val("");
}
},
source: function(request, response) {
$.ajax({
url: 'urltoscript.php',
dataType: "json",
data: {
term : request.term,
country : $("#abox").val() // extra parameters
},
success: function(data) {
response($.map(data,function (item)
{
return {
id: item.id,
value: item.name
};
}));
}
});
},
minLength: 3
, highlightItem: true
});
