Javascript jQuery UI 自动完成提交点击结果

jQuery UI autocomplete submit onclick result

提问by Panama Hyman

I've been trying to figure out how to submit the form when the person selects the result from choices of the autocomplete. It needs to work with a mouse click or enter button. I see examples out there but always in pieces. No one shows the entire function.

我一直试图弄清楚当人们从自动完成选项中选择结果时如何提交表单。它需要通过鼠标单击或输入按钮工作。我看到了一些例子，但总是碎片化的。没有人显示整个功能。

I have this code below but I get errors saying result is not a function. I don't know how to combine this to do what I would like. Any help is appreciated.

我在下面有这个代码，但我收到错误消息，说结果不是一个函数。我不知道如何将它结合起来做我想做的事。任何帮助表示赞赏。

jQuery(document).ready(function(){  

jQuery("#vsearch").autocomplete("ajax/search.php",
    {
    minLength: 2
}
);
jQuery("#vsearch").result(function(event, data, formatted) {
      jQuery('#vsearch').value( formatted );
      jQuery('#search').submit();
});
});

回答by mattsven

From: http://api.jqueryui.com/autocomplete/#event-select

来自：http: //api.jqueryui.com/autocomplete/#event-select

select- Type:autocompleteselect

Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

Code examples

Supply a callback function to handle the select event as an init option.

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

Bind to the select event by type: autocompleteselect.

$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

选择- 类型：自动完成选择

当从菜单中选择一个项目时触发；ui.item 指的是选中的项目。select 的默认操作是将文本字段的值替换为所选项目的值。取消此事件会阻止更新值，但不会阻止菜单关闭。

代码示例

提供一个回调函数来处理作为 init 选项的 select 事件。

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

按类型绑定到选择事件：autocompleteselect。

$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

So you would use:

所以你会使用：

EDIT:(modified in case user does not select anything)

编辑：（修改以防用户不选择任何内容）

$("#vsearch").autocomplete({
    source: "ajax/search.php",
    minLength: 2,
    select: function(event, ui) {
        if(ui.item){
            $('#vsearch').val(ui.item.value);
        }
        $('#search').submit();
    }
});

If I am sure of what you are wanting to do.

如果我确定你想要做什么。

回答by Anthony McLin

Actually, you don't need to target the for element and form by ID... since that information is already passed to the select function via the Event object. It's better to get the form this way because you may have multiple forms on a page that you want to apply autocomplete to. Or you may want autocomplete on multiple elements.

实际上，您不需要通过 ID 来定位 for 元素和表单...因为该信息已经通过 Event 对象传递给了 select 函数。最好以这种方式获取表单，因为页面上可能有多个表单要应用自动完成功能。或者您可能希望在多个元素上自动完成。

Also, the syntax in the other answer is wrong. JQuery uses .val() not .value() to set an input's value.

此外，另一个答案中的语法是错误的。JQuery 使用 .val() 而不是 .value() 来设置输入的值。

Here's a corrected example:

这是一个更正的示例：

$("#vsearch").autocomplete({
    source: "ajax/search.php",
    minLength: 2,
    select: function(event, ui) {
        //assign value back to the form element
        if(ui.item){
            $(event.target).val(ui.item.value);
        }
        //submit the form
        $(event.target.form).submit();
    }
});