массив результатов автозаполнения

Question

Я настроил функцию автозаполнения для поля ввода с пользовательским интерфейсом jQuery .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, чтобы вызвать специальное событие, к которому можно привязать:

   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

Вы можете получить доступ к опциям с помощью

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

Новая скрипка

Answer 3

Взгляните на result событие. Я думаю, что это даст вам массив объектов, которые он показывает в автоматическом завершении.

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