jQuery 自动完成 UI - 我希望它能够在焦点上开始搜索，而无需用户输入任何内容

Question

jQuery 自动完成 UI - 我想启动“onfocus”搜索，并在用户按选项卡或单击搜索字段时立即显示选择列表，而无需用户输入任何内容。

默认行为似乎要求用户输入一个字符或向下箭头来开始滚动并开始搜索并获取值，即使我将所需的字符数设置为零也是如此。

$( "#contact" ).autocomplete({
    source: 'remote.php',
    minLength: 0
});

谢谢！

Answer 1

比埃米特的答案复杂一点，但是...

• 即使框已包含文本，也会在焦点上弹出列表
• 单击某个项目后避免重新弹出列表

如下所示：

var closing = false;

$('#contact').autocomplete({
    source: 'remote.php',
    minLength: 0,
    close: function()
    {
        // avoid double-pop-up issue
        closing = true;
        setTimeout(function() { closing = false; }, 300);
    }
})
.focus(function() {
    if (!closing)
        $(this).autocomplete("search");
});

Answer 2

我发现这段代码更加简洁并且特定于元素。

 $(<selector>).autocomplete({
            minLength: 0,
            delay: 500,
            source: funcDataLookUp,
            open: function() { $(this).attr('state', 'open'); },
            close: function () { $(this).attr('state', 'closed'); }
        }).focus(function () {
            if ($(this).attr('state') != 'open') {
                $(this).autocomplete("search");
            }
        });

Answer 3

尝试将焦点与自动完成功能绑定。

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

查看我的示例 JSFiddle。

Answer 4

$("#contact").focus(function() {
    if ($(this).val().length == 0) {
        $(this).autocomplete("search");
    }
});

确保自动完成的 minLength 为 0。

Answer 5

此解决方案对我来说并不完全有效，因为在选择所需结果后，自动完成结果框会再次弹出。这是因为 .focus 方法是在 close: 事件之前执行的。

此外，根据该答案中的代码，一旦盒子关闭，它就不会再打开，因为close: 在 .focus 之后执行，>ending 变量保持 true。

以下代码解决了这两个问题（请注意，close: 事件中的变量 looking 设置为 false）：

var closing = false;

$(function() {$(".autocomplete").autocomplete({
    source: 'remote.php',
    minLength: 0,
    open: function(){
        closing=true; },
    close: function(){
        closing = false;
        }
})
    .focus(function(){
        if ((!closing) && ($(this).val() !== "")){
            $(this).autocomplete("search");
        }
    });
})

Answer 6

这个解决方案对我不起作用，但是这个：

$('#contact').autocomplete({
source: 'remote.php',
minLength: 0
           }).focus(function(){
if (this.value == "")
$(this).trigger('keydown.autocomplete');
});

效果很好（来源：jquery 论坛)

Answer 7

JQUERY 实际上建议使用这种方法

http://api.jqueryui.com/autocomplete/#method-search< /a>

$('.yourclass').autocomplete({
   minLength: 0
   ,source:['blah','andblahagain']
   ,focus: function() {
     $(this).autocomplete("search", "");
   },
});

基本上你使用 minLength:0 和焦点事件来搜索“”。