JQuery自动完成，手动选择第一个搜索项并绑定点击事件

Question

我想手动选择自动完成中的某个项目并根据该值单击它。

以下是代码:

autocompleteitem.autocomplete("option", "autoFocus", true).autocomplete("search", autocompleteitem.val());

autocompleteitem是一个输入对象，它保存了我想要搜索的值。现在这段代码成功地从下拉菜单中选择了第一项，但没有点击它。我不想自己点击它，我希望它在代码中以某种方式发生。

我尝试了上面代码的以下添加，但都没有起作用：

   .click(), .select(), .trigger('select'), .find('a').click(), .change()

有没有办法我可以做到这一点？

谢谢

请有人帮忙

- Giorgi

---

你是说如果搜索值是特定的，那么代码就会点击第一个项目吗？ - Amin Eshaq

你使用的是哪个自动补全？ - rajesh kakawat

阿明，是的，这就是我想做的。JQuery自动完成。 - Giorgi

我正在使用jQuery ui-autocomplete。 - Giorgi

Answer 1

如果您查看jQuery团队在自动完成的 单元测试 中的做法，他们使用类似以下代码：

    var downKeyEvent = $.Event("keydown");
    downKeyEvent.keyCode = $.ui.keyCode.DOWN;  // event for pressing "down" key

    var enterKeyEvent = $.Event("keydown");
    enterKeyEvent.keyCode = $.ui.keyCode.ENTER;  // event for pressing "enter" key

    $("#autoComplete").val("item"); // enter text to trigger autocomplete
    $("#autoComplete").trigger(downKeyEvent);  // First downkey invokes search
    $("#autoComplete").trigger(downKeyEvent);  // Second downkey highlights first item
    $("#autoComplete").trigger(enterKeyEvent); // Enter key selects highlighted item 

这个样例展示了它的工作原理。

（The plunk shows it working.）

- Rune Vejen Petersen

---

我想指出，我使用的是combobox jquery插件（它使用自动完成），在使用该插件时需要按两次DOWN键才能按ENTER键。 - Danny

在SO上有几个关于这个主题的问题/答案集，但这是唯一一个对我实际起作用的。谢谢！ - B Robster

我也发现需要按两次向下箭头键，然后再按回车键。 - ballPointPenguin

按下回车键需要按两次的原因是UI需要时间来更新。Javascript和UI更新不能同时运行。因此，您需要使用setTimeout()函数引入时间延迟。 - Michael Yagudaev

我相信你可以用0毫秒的延迟完成它。我经常在underscore中使用defer函数，只是为了让未来的维护者更清楚意图。http://underscorejs.org/#defer - Michael Yagudaev

Answer 2

看看这个 jqFAQ.com主题，这将帮助您以编程方式选择匹配值的第一个选项并将其设置到自动完成文本框中。还有一些其他与自动完成相关的常见问题解答，我认为这也可能对您有用。

- Amar

---

此链接已失效。 - Maltiriel