JQuery 自动完成：在选择时提交表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2198539/
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: Submit Form on selection?
提问by ILT
Using JQuery Autocomplete on a traditional HTML form.
在传统的 HTML 表单上使用 JQuery 自动完成。
Trying submit the form (the old-fashioned way) when a selection is made.
在做出选择时尝试提交表单（老式方式）。
But the input box gets filled out and then I have to make press "return" a 2nd time, or click the submit button.
但是输入框被填写，然后我必须第二次按“返回”，或者单击提交按钮。
I've tried a few SO examples, but I could not get them to work.
我已经尝试了一些 SO 示例，但我无法让它们工作。
How do you submit the form automatically when the selection is made?
选择后如何自动提交表单？
回答by bjudson
UPDATE:I finally figured this one out, the code below should do the trick. For some reason the changecallback was not working, but the close& selectcallbacks do. Using selectis better, since closewill also be called if the field loses focus.
更新：我终于想通了，下面的代码应该可以解决问题。由于某种原因，change回调不起作用，但close&select回调起作用了。使用select更好，因为close如果字段失去焦点也会被调用。
$(function() {
$("#searchField").autocomplete({
source: "values.json",
select: function(event, ui) {
$("#searchForm").submit(); }
});
});
ANOTHER UPDATE:Ok, there's also a problem with the selectcallback, which is that by default (in the code above) if you traverse the autocomplete drop down with the keyboard, and select with the enter key, the input is changed before the form is submitted. However, if you select it with the mouse, the form is submitted just before the input is changed, so the value submitted is just what the user typed (not what she selected from the autocomplete dropdown). The woraround that seems to work is:
另一个更新：好的，select回调也有问题，默认情况下（在上面的代码中）如果你用键盘遍历自动完成下拉菜单，并用回车键选择，在表单之前更改输入提交。但是，如果您用鼠标选择它，表单会在输入更改之前提交，因此提交的值就是用户键入的值（而不是她从自动完成下拉列表中选择的值）。似乎有效的解决方法是：
$("#searchField").autocomplete({
source: "values.json",
minLength: 2,
select: function(event, ui) {
$("#searchField").val(ui.item.label);
$("#searchForm").submit(); }
});
回答by tarkeshwar
$( "#searchField" ).result(function(event, data, formatted) {
$(this).closest("form").submit();
});
The searchField is already populated with the selected field, so no need to do it in this function again.
searchField 已经填充了所选字段，因此无需再次在此函数中执行此操作。
Official documentation: http://docs.jquery.com/Plugins/Autocomplete/result#handler
官方文档：http: //docs.jquery.com/Plugins/Autocomplete/result#handler
回答by Crob
I couldn't comment on the answer by @handsofaten so I will add to his answer here. It may make more sense to use valuerather than labelas in some cases, my case, the label is not what the user would want to search the database with.
我无法对@handsofaten 的回答发表评论，所以我会在这里添加他的回答。使用值而不是标签可能更有意义，因为在某些情况下，在我的情况下，标签不是用户想要搜索数据库的内容。
$("#searchField").autocomplete({
source: "values.json",
minLength: 2,
select: function(event, ui) {
$("#searchField").val(ui.item.value);
$("#searchForm").submit(); }
});
回答by MD Shahrouq
You submit your selected filed by calling the Submit button ID in this field , even if the code is in other page too.
您可以通过调用此字段中的提交按钮 ID 来提交您选择的文件，即使代码也在其他页面中。
document.getElementById('submit').click();
回答by Vandana Rajput
select: function( event, ui ) {
if(ui.item){
$(event.target).val(ui.item.value);
}
$(event.target.form).submit();
});
