jQuery自动完成插件如何在输入框获取焦点时触发下拉菜单？

Question

我正在使用下面这个流行的 JQuery 自动完成插件。

http://jqueryui.com/demos/autocomplete/

目前，当您输入短语时，下拉菜单会出现，但是当您点击其他地方时它就会隐藏。这很好。然而，唯一使下拉菜单重新出现的方法是要么在输入字段中再次点击并输入更多字符，要么按下键盘上的按键。

有没有办法在用户点击输入字段时触发结果的下拉菜单？我尝试了为输入字段触发焦点事件，但那行不通。我需要在输入字段获得焦点时手动调用自动完成下拉菜单事件。谢谢。

- leejmurphy

Answer 1

工作演示 http://jsfiddle.net/CNYCS/

很棒，所以你需要做的就是将focus事件与自动完成绑定，剩下的内容`autocomplete`会接管，如演示中所示。

有用的链接：http://forum.jquery.com/topic/how-to-bind-focus-input-to-trigger-autocomplete&http://docs.jquery.com/UI/Autocomplete#method-search

希望这可以帮助你，

剩余的代码在jsfiddle中。

代码

  $( "#tags" ).autocomplete({
        source: availableTags,
        minLength:0
    }).bind('focus', function(){ $(this).autocomplete("search"); } );

- Tats_innit

---

太棒了！正是我需要的！运行得非常好！ - Jay Pagnis

Answer 2

根据文档，没有明显的方法可以这样做。但是您可以尝试在启用了自动完成的文本框上使用focus（或click或keyup）事件：

$('#autocomplete').trigger("keyup"); 

或者

$('#autocomplete').trigger("focus"); 

或者

$('#autocomplete').trigger("click"); 

正如@Tats_innit所提到的代码，之后您只需要添加这行代码即可：

$('#tags').trigger("focus"); // as @Tats_innit's solution bind focus
                             // so you need to trigger focus

DEMO

- thecodeparadox

---

再加一啊，伙计 :) 很高兴这些日子我没有和你的解决方案搞砸 :P 无论如何，下面是 OP 的演示差异 +! - Tats_innit

Answer 3

在上面给出的代码中添加。 在我的情况下，availableTags 是从服务器值加载的。 因此，如果该值为空，我只想打开弹出窗口-这样可以节省服务器在焦点上再次加载标签的不必要触发器。

$( "#tags" ).autocomplete({
        source: availableTags,
        minLength:0
    }).bind('focus', function () {
            if ($(this).val().length == 0) {
                $(this).autocomplete("search", "");
            }
        });

- Kalpesh Popat

---

我知道这有点违背初衷，但是是否有可能在文本字段中有内容的情况下打开包含所有选项的下拉菜单？或者是否有其他插件建议可以实现这一点？基本上，我想要一个自由文本输入框，在焦点聚焦时显示预定义列表，而不是经过筛选的列表。 - SeaBass

如果您删除以下条件，此代码将完成您的工作。if ($(this).val().length == 0) { - Kalpesh Popat