jquery - 自动完成结果数组

Question

我已经使用 jQuery UI 的 .autocomplete() 为输入框设置了自动完成功能。

如何访问开始输入时下拉的结果数组(或对象？)？

我想使用结果来突出显示我的页面上的各种其他元素。

Answer 1

有两种方法可以实现此目的。

1. 使用source选项定义过滤结果的逻辑。此逻辑与小部件的源代码相同:

   $("#auto").autocomplete({
       source: function (request, response) {
           var results = $.ui.autocomplete.filter(source, request.term);
   
           $("#results").text(results.join(", "));
   
           response(results);
       }
   });
   

   示例: http://jsfiddle.net/andrewwhitaker/27S6p/

   如果您使用远程数据源，这很容易集成到您的 AJAX 响应中。

2. 如果您需要多个自动完成小部件的解决方案，您可以重写 _response 函数以引发可绑定(bind)到的特殊事件:

   var __response = $.ui.autocomplete.prototype._response;
   $.ui.autocomplete.prototype._response = function(content) {
       __response.apply(this, [content]);
       this.element.trigger("autocompletesearchcomplete", [content]);
   };
   
   $("#auto").autocomplete({
       source: src
   }).bind("autocompletesearchcomplete", function (event, results) {
       $("#results").text(results.join(", "));
   });
   

   示例: http://jsfiddle.net/andrewwhitaker/V9Vun/

   如果页面上有多个小部件并且需要对所有小部件执行此操作，我只会使用此解决方案。

它们都不理想，但应该能得到您想要的结果。