jQuery 自动完成输入密钥问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24667090/
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 enter key issue
提问by Ashutosh
I have a text box for searching using jQuery autocomplete. When I type something in text box, it is showing the suggestions out of which none is selected.
我有一个用于使用 jQuery 自动完成进行搜索的文本框。当我在文本框中键入内容时，它会显示未选择任何内容的建议。
I found out that selectFirst: trueis not supported now. If I select an item in the drop down list and press enter, it is working fine.
我发现现在不支持selectFirst: true。如果我在下拉列表中选择一个项目并按 Enter 键，则它工作正常。
The problem is that if user enters appfor apple and presses the enter key, it tries to submit the form with app. The form should only be submitted with one of the values from the drop down list.
问题是，如果用户输入 appfor apple 并按下回车键，它会尝试使用app提交表单。提交表单时应仅使用下拉列表中的值之一。
I tried to disable the form submit on pressing enter so that I could submit form from JavaScript but couldn't find a solution.
我试图在按下 Enter 键时禁用表单提交，以便我可以从 JavaScript 提交表单，但找不到解决方案。
Here is my code:
这是我的代码：
$("#searchtext").autocomplete({
source: path + 'autocompletesearch?category=' + $("select[name='category'] option:selected").val(),
width: '500px',
matchContains: true,
select: function(event, ui){
$(".searchform").attr("action", path + "fullproductinfo/" + ui.item.id);
$("input[name='searchid']").val(ui.item.value);
$(".searchform").submit();
}
});
And my form:
还有我的表格：
<form method="post" action="search" class="searchform">
<div class="searchdiv">
<input type="text" id="searchtext" name="searchtext"
placeholder="Search a product or a brand" autocomplete="off"/>
</div>
<div class="searchbutton">
<input type="button" name="btnsearchproduct" value="Search" />
</div>
<div class="clear"></div>
</form>
Note that there is <input type='button'and not 'submit', so default enter pressing should not work for form. It is the autocomplete i guess that is submitting the form on submit.
请注意，存在<input type='button'而不是“提交”，因此默认的回车键不适用于表单。我猜这是在提交时提交表单的自动完成功能。
回答by j809
If you are using this: http://jqueryui.com/autocomplete/
如果你使用这个：http: //jqueryui.com/autocomplete/
Then you want first item to autoFocus, you can use that option now:
然后你想要第一个项目autoFocus，你现在可以使用该选项：
$( ".selector" ).autocomplete({ autoFocus: true });
Mentioned in documentation: http://api.jqueryui.com/autocomplete/
文档中提到：http: //api.jqueryui.com/autocomplete/
EDIT
编辑
Since you have enter key issue, you can try like this:
由于您输入了密钥问题，您可以尝试这样：
$(".selector").keydown(function(event){
if(event.keyCode == 13) {
if($(".selector").val().length==0) {
event.preventDefault();
return false;
}
}
});
回答by Annie C
If you are using jquery ui for auto complete, all you need is specifying the autoFocus: true option.
如果您使用 jquery ui 进行自动完成，您只需要指定 autoFocus: true 选项。
It will automatically select the first result and when hit enter key it will use the first result.
它将自动选择第一个结果，当按回车键时，它将使用第一个结果。
$( ".selector" ).autocomplete({
autoFocus: true,
source: function (request, response) {
//your code
},
select: function(event, ui) {
//your code
}
});
回答by AK Imran
I had a similar issue & this is how I resolved it
我有一个类似的问题，这就是我解决它的方法
if ($(".selector").val().length > 0) {
var options = $(".selector").autocomplete("option");
var fromAutocomplete = false;
jQuery.each(options.source, function(index, device) {
if ($(".selector").val() == options.source[index]) {
fromAutocomplete = true;
}
});
if (!fromAutocomplete) {
$(".selector").val("");
$(".selector").attr("disabled", false);
return false;
}
}
