Question

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

当我开始输入时，如何访问下拉结果的数组（或对象？）？

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

Answer 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响应中。

如果您需要多个自动完成小部件的解决方案，您可以覆盖_response函数以引发可以绑定到的特殊事件：

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/

如果您在页面上有多个小部件，我只会使用此解决方案，您需要为所有这些小部件执行此操作。

它们都不是理想的，但应该得到你正在寻找的结果。

Answer 2

查看result事件。我认为它将为您提供它在自动完成中显示的对象数组。

http://docs.jquery.com/Plugins/Autocomplete/result#handler

Answer 3

您可以使用

访问选项

$('input[type="text"]').autocomplete({
    source: availableTags,
    open: function( event, ui ) {
        var autocomplete = $( this ).data( "autocomplete" ),
        menu = autocomplete.menu;
        console.log(menu.element.children());
    }
});

menu.element.children()为您提供HTML列表项。您可以轻松地解析它们（剥离HTML）并从中构建一个数组并将其传递给突出显示函数。

JSFiddle

Edit2 ：以下编辑不会返回预期值。

修改：不要访问menu.element，而是转到console.log(autocomplete.options.source);

New Fiddle

自动完成结果数组

3 个答案: