如何使 jQuery 自动完成列表显示所有选项 onfocus 并在选择选项后隐藏？

Posted 2023-02-24

【中文标题】如何使 jQuery 自动完成列表显示所有选项 onfocus 并在选择选项后隐藏？

【英文标题】：How to make jQuery autocomplete list display all options onfocus and hide after option is selected?

【发布时间】：2012-01-02 15:28:03

【问题描述】：

我有一个带有自动完成功能的表单，它启动搜索“onfocus”并在用户点击搜索字段时显示选项列表，即使他们没有输入任何内容。

问题是自动完成需要使用键盘选择选项（向下箭头后跟制表符/返回或双击）。我的第一个想法是单击一下会使焦点保留在搜索字段中，因此自动完成功能保持可见。但是，第二次单击后搜索字段仍保持焦点，但第二次单击后自动完成消失。

有什么想法吗？

<script>
$(document).ready(function() 

    var autocomplete_focus = function()           
        if ($(this).val().length == 0) 
            $(this).autocomplete("search", "%");
        
       

    $( ".autocomplete" ).autocomplete(
            source: "../../db/autocomplete_list.php",
            minLength: 0
    );

    $( ".autocomplete" ).focus(autocomplete_focus);

);
</script>

我知道similar question 之前已经在这里发布过；但是，建议的解决方案对我不起作用。

【问题讨论】：

你看到问题here了吗？

是的，这似乎有效；但是，由于某种原因，问题似乎只发生在远程源上。

啊，好的。我会做更多的挖掘。

谢谢！请参阅下面亚历克斯的回答。那也是我得到的最接近的；然而，并不完美！

【参考方案1】：

这个方法：

$( ".autocomplete" ).autocomplete(
        source: "../../db/autocomplete_list.php",
        minLength: 0
).focus(function()            
        $(this).trigger('keydown.autocomplete');
);

为我工作。

来源：

Display jquery ui auto-complete list on focus event

【讨论】：

这是我找到的最好的解决方案；但是，这只显示“第一个”焦点上的所有值。当我在页面加载后专注于搜索字段时，它会显示所有值。但是，如果我然后单击搜索字段（移除焦点），然后再次单击它，它不会再次拉出完整列表。

【参考方案2】：

不确定这是否是一个可接受的解决方案，但一种方法是使用焦点值填充input。这可以防止菜单显示两次：

/* snip: */
focus: function (event, ui) 
    this.value = ui.item.value;
,

这是一个例子： http://jsfiddle.net/wxQf7/

尝试删除focus 事件处理程序以查看问题中的症状。

【讨论】：

美丽的解决方案...你是最棒的！ :) 谢谢！！

@Michael：没问题！乐意效劳。这实际上应该在小部件本身中修复。

【参考方案3】：

试试这个。 这段代码实际上删除了有问题的 keydown.autocomplete。相反，它会在您每次关注文本字段时进行搜索。

$( ".autocomplete" ).autocomplete(
    source: "../../db/autocomplete_list.php",
    minLength: 0
).focus(function() 
    $(this).data("autocomplete").search($(this).val());

但是，如果您希望下拉菜单在您选择条目后立即消失，请添加此行

$( ".autocomplete" ).autocomplete(
    source: "../../db/autocomplete_list.php",
    minLength: 0
).focus(function()

    **if ($(this).autocomplete("widget").is(":visible"))
       return;**
    $(this).data("autocomplete").search($(this).val());

当控件在鼠标点击的情况下接收到焦点时，如果下拉列表已经显示，它不会执行 display-all-on-focus。这就是这段代码的作用