jquery 自动完成触发下拉输入:焦点

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11168446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:16:47  来源:igfitidea点击:

jquery autocomplete trigger dropdown on input:focus

jqueryautocompletejquery-ui-autocomplete

提问by leejmurphy

I'm using the popular JQuery Autocomplete plugin below.

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

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

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

Currently if you type a phrase the drop down appears but when you click away it hides. This is fine. However the only way to bring the dropdown back is to either click in the input field and type further characters or press keydown.

目前,如果您输入一个短语,下拉菜单会出现,但当您点击它时它会隐藏。这可以。但是,恢复下拉菜单的唯一方法是单击输入字段并键入更多字符或按下 keydown。

Any ideas on how to trigger the dropdown of results when the user clicks in the input field? I've tried to trigger the focus event for the input field but that doesn't work. I somehow need to manually call the autocomplete dropdown event when the input field is focused. Thanks.

关于如何在用户单击输入字段时触发结果下拉列表的任何想法?我试图触发输入字段的焦点事件,但这不起作用。当输入字段被聚焦时,我不知何故需要手动调用自动完成下拉事件。谢谢。

回答by Tats_innit

Working demohttp://jsfiddle.net/CNYCS/

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

Cool; so all you need to do is bindfocus event with the autocomplete, rest `autocomplete will take over from there as you can see in the demo.

凉爽的; 所以你需要做的就是bind使用自动完成的焦点事件,休息`自动完成将从那里接管,正如你在演示中看到的那样。

Helpful Link: http://forum.jquery.com/topic/how-to-bind-focus-input-to-trigger-autocomplete&http://docs.jquery.com/UI/Autocomplete#method-search

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

Hope this helps,

希望这可以帮助,

Rest code is in jsfiddle.

其余代码在 jsfiddle 中。

code

代码

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

回答by thecodeparadox

There is no obvious way to do so according to doc. But you can try with focus(or clickor keyup) event on the autocompleteenabled textbox:

根据文档,没有明显的方法可以这样做。但是您可以在启用的focus(or clickor keyup) 事件上尝试:autocompletetextbox

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

or

或者

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

or

或者

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

As @Tats_innitmentioned the code, after that you need to just add the line

正如@Tats_innit提到的代码,之后你只需要添加行

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

DEMO

演示

回答by Kalpesh Popat

Adding to the code given above. In my case availableTags were loading from server values. Hence I wanted to open popup only if the value was blank - this saves an unnecessary trigger for server to load tags again on focus.

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

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