Question

我有一个带有自动填充的表单，可以启动搜索“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;但是，建议的解决方案对我不起作用。

Answer 1

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

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

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

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

Answer 2

此方法：

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

适合我。

来源：

Display jquery ui auto-complete list on focus event

Answer 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());
}

当控件在鼠标单击时收到焦点时，如果已经显示了下拉列表，则它不会显示全部焦点。这就是这段代码的作用

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

3 个答案: