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

Question

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

在做出选择时尝试提交表单(旧式方式).

但是输入框被填写然后我必须第二次按"返回",或者单击提交按钮.

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

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

Answer 1

更新:我终于想出了这个,下面的代码应该做的伎俩.由于某种原因,change回调不起作用,但close&select回调确实有效.使用select更好,因为close如果场失去焦点也会被调用.

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

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

$("#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(); }
});