Question

在传统的HTML表单上使用JQuery Autocomplete。

在选择时尝试提交表单（旧式方式）。

但输入框已填写完毕，然后我必须第二次按“返回”，或点击提交按钮。

我尝试了一些SO示例，但我无法让它们工作。

如何在选择时自动提交表单？

Answer 1

更新：我终于想出了这个，下面的代码应该可以解决问题。出于某种原因，change回调无效，但close＆amp; select回调可以。使用select会更好，因为如果字段失去焦点，也会调用close。

$(function() {
    $("#searchField").autocomplete({
        source: "values.json",
        select: function(event, ui) { 
            $("#searchForm").submit(); }
    });
});

另一个更新：好的，select回调也存在问题，如果您使用键盘遍历自动完成下拉列表，则默认情况下（在上面的代码中）并使用回车键选择，在提交表单之前更改输入。但是，如果您使用鼠标选择它，则表单会在输入更改之前提交，因此提交的值就是用户键入的值（而不是她从自动完成下拉菜单中选择的值）。似乎有用的事情是：

$("#searchField").autocomplete({
    source: "values.json",
    minLength: 2,
    select: function(event, ui) { 
        $("#searchField").val(ui.item.label);
        $("#searchForm").submit(); }
});

Answer 2

$( "#searchField" ).result(function(event, data, formatted) {
  $(this).closest("form").submit();
});

searchField已经填充了所选字段，因此无需再次使用此功能。

官方文件：http://docs.jquery.com/Plugins/Autocomplete/result#handler

Answer 3

我无法评论@handsofaten的答案，所以我会在这里补充他的答案。使用值而不是标签可能更有意义，因为在某些情况下，我的情况是，标签不是用户想要搜索数据库的标签。

$("#searchField").autocomplete({
source: "values.json",
minLength: 2,
select: function(event, ui) { 
    $("#searchField").val(ui.item.value);
    $("#searchForm").submit(); }
});

Answer 4

您可以通过在此字段中调用“提交”按钮ID来提交您选择的字段，即使代码也在其他页面中也是如此。

 document.getElementById('submit').click();

Answer 5

  select: function( event, ui ) {

          if(ui.item){

           $(event.target).val(ui.item.value);

    }

           $(event.target.form).submit();

                  });

JQuery自动填充：在选择时提交表单？

5 个答案: