jQuery 自动完成 UI - 我希望它在用户无需输入任何内容的情况下开始搜索 onfocus答案

【问题标题】：jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anythingjQuery 自动完成 UI - 我希望它在用户无需输入任何内容的情况下开始搜索 onfocus
【发布时间】：2011-05-27 15:32:38
【问题描述】：

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

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

$( "#contact" ).autocomplete({ 来源：'remote.php'，最小长度：0 });

谢谢！

【问题讨论】：

标签： jquery jquery-ui-autocomplete

【解决方案1】：

JQUERY 实际上建议了这种方法

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

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

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

【讨论】：

仅使用 JQuery 自动完成参数的解决方案。每个人都应该寻找的确切解决方案。

【解决方案2】：

This solution 并不完全适合我，因为在选择所需结果后，自动完成结果框会再次弹出。这是因为.focus 方法是在close: 事件之前执行的。

另外，根据that answer中的代码，一旦盒子关闭，它就不会重新打开，因为closing变量停留在true，因为close:在.focus之后执行。

以下代码解决了这两个问题（注意变量closing 在close: 事件中设置为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");
        }
    });
})

【讨论】：

【解决方案3】：

尝试使用自动完成绑定focus。

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

查看我的示例JSFiddle。

【讨论】：

【解决方案4】：

我发现这段代码更简洁一些，并且针对特定元素。

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

【讨论】：

【解决方案5】：

这个解决方案不适合我，但是这个：

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

效果很好（来源：jquery forum）

【讨论】：

【解决方案6】：

比埃米特的回答要复杂一些，但是……

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

这里是：

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");
});

【讨论】：

您实际上可以只使用 minLength 的参数并在自动完成中聚焦，而无需任何进一步的编码。请参阅 androidmj 的解决方案。

【解决方案7】：

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

确保您的自动完成功能的 minLength 为 0。

【讨论】：

它现在有点奇怪。下拉列表现在需要使用向下箭头或双击来选择选择。单击即可将选项放入框中，但在您移动鼠标时它不会保留。火狐或 IE