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

【问题标题】：Display jquery ui auto-complete list on focus event在焦点事件上显示 jquery ui 自动完成列表
【发布时间】：2011-05-07 03:11:44
【问题描述】：

这是我的代码，有什么问题吗？它似乎没有在焦点上显示列表，我仍然需要在显示列表之前按一个键

<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                    ],
            minLength: 0
        });
    }).focus(function(){            
            $(this).trigger('keydown.autocomplete');
    });
</script>


<input type="text" id="id">

【问题讨论】：

标签： jquery

【解决方案1】：

焦点时直接调用默认值的搜索方法。

http://jsfiddle.net/steelywing/ubugC/

$("input").autocomplete({
    source: ["Apple", "Boy", "Cat"],
    minLength: 0,
}).focus(function () {
    $(this).autocomplete("search");
});

【讨论】：

所选解决方案不再有效（如果它曾经有效）。 jQuery UI 方法“搜索”是手动触发元素显示其搜索结果的最佳方式。这个答案有效。
使用 $(this).autocomplete("search", "") 如果你想在焦点上显示所有项目，即使已经输入包含一些文本。
正确，最佳答案。谢谢@steely Wing
简短而简单。最佳答案！

【解决方案2】：

看起来您将 focus() 处理程序附加到匿名函数而不是文本框。

试试这个：

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){            
            // The following works only once.
            // $(this).trigger('keydown.autocomplete');
            // As suggested by digitalPBK, works multiple times
            // $(this).data("autocomplete").search($(this).val());
            // As noted by Jonny in his answer, with newer versions use uiAutocomplete
            $(this).data("uiAutocomplete").search($(this).val());
        });
    });
</script>

【讨论】：

为什么降价而没有评论？它是干什么用的？
有谁知道如何使这项工作不止一次？我刚刚意识到我发布了一个类似的问题：stackoverflow.com/questions/8206603/…
这显示下拉两次
这仅适用于第一次，但如果您将 keydown 替换为 search 它每次都有效。即：$(this).autocomplete("search", "");
@AhmadNadeem - 刚刚使用它，它对我有用，第二个参数中的引号之间有一个空格：$(this).autocomplete("search"," "); 答案中出现的解决方案在 1.12.1 中不起作用跨度>

【解决方案3】：

让它工作不止一次的解决方案

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){     
            //Use the below line instead of triggering keydown
            $(this).data("autocomplete").search($(this).val());
        });
    });
</script>

【讨论】：

使用 jQuery UI 1.10.0 测试你需要使用 .data("uiAutocomplete") 而不是 .data("autocomplete")
$(this).autocomplete("search") 建议在API documentation
谢谢@Lekensteyn。这正是我所需要的！
我的是 jquery ui 1.9.1，它已经使用了 data("uiAutocomplete") 而不是 data("autocomplete")。请在代码上更正。
这太棒了，我放弃了投票，但是如果我们将 catcomplete 与小部件一起使用会怎样？对于 catcomplete，它不会多次工作。

【解决方案4】：

digitalPBK 几乎是对的......

他的解决方案不止一次有效，但在您通过鼠标单击从列表中选择一个项目时不会关闭下拉列表。在这种情况下，当您单击时焦点会返回到控件，因此它会在应该关闭列表时重新打开列表。

这是一个修复，它是唯一对我有用的方法，我认为它应该在现在使用 autocomplete() 函数的最新版本 (1.8.11) 时工作。当控件接收到焦点时，如果下拉列表已经显示，它不会执行 display-all-on-focus...

<script type="text/javascript"> 
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function () {
            if ($(this).autocomplete("widget").is(":visible")) {
                return;
            }
            $(this).data("autocomplete").search($(this).val());
        });
</script>

【讨论】：

谢谢！恕我直言，这是解决问题的最佳方法。
优秀的答案！焦点事件将被多次调用，如果数据很大，浏览器将冻结。我们需要If条件

【解决方案5】：

$(this).trigger('keydown.autocomplete'); 不太适合我。

这就是我所做的：

$('#id').on( "focus", function( event, ui ) {
    $(this).trigger(jQuery.Event("keydown"));
   // Since I know keydown opens the menu, might as well fire a keydown event to the element
});

【讨论】：

【解决方案6】：

对于较新的版本，您可能需要将自动完成更改为 uiAutocomplete

$(this).data("uiAutocomplete").search($(this).val());

【讨论】：

【解决方案7】：

如果你想改变一些关于 jQuery UI 的东西，用 jQuery UI 的方式来做。

利用 jQuery UI Widget Factory。与将事件附加到元素相比，它更容易维护、更快、更简洁。

$.widget('custom.autocomplete', $.ui.autocomplete, {
  options: {
    minLength: 0
  },
  _create: function() {
    this._on(this.element, {
      focus: function(event) {
        this.search();
      }
    });

    this._super();
  }
});

【讨论】：

【解决方案8】：

AutoComplete 的一般用途是在按键时执行，根据我们输入的字母，它通常会执行通配符搜索并显示结果。

无论如何，从上面的代码中我可以看到：

焦点（函数（）{
$(this).trigger('keydown.autocomplete');

按照 Codesleuth 的说法，它附加到匿名函数而不是 Control。

【讨论】：

【解决方案9】：

这种工作方式正确。

$.widget('custom.autocomplete', $.ui.autocomplete, {
  options: {
    minLength: 0
  },
  _create: function() {
    this._on(this.element, {
      focus: function(event) {
        this.search();
      }
    });

    this._super();
  }
});

【讨论】：