4

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

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

有任何想法吗？

<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>

我意识到以前在这里发布过类似的问题；但是，建议的解决方案对我不起作用。

4

3 回答 3

5

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

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

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

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

于 2011-11-21T03:07:41.960 回答
2

这种方法：

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

为我工作。

资源：

在焦点事件上显示 jquery ui 自动完成列表

于 2011-11-21T02:27:55.747 回答
0

尝试这个。这段代码实际上删除了有问题的 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。这就是这段代码的作用

于 2012-09-04T11:07:52.123 回答