Каким образом изменить структуру результата autocomplete?

Question

[malayamarisha]

Всем привет.
Необходимо в строку поиска внедрить autocomplete (пока локально) и видоизменить результат.

На данный момент:
1) Версия: Ajax Autocomplete for jQuery, version 1.4.11
2) Строка поиска:

<input id="word-search" type="text"  placeholder="Искать на сайте ..." maxlength="256" name="s" />

3) Список городов:

var countries = [
        { value: 'Andorra', data: 'AD', img: 'images/1.png' },
        { value: 'Zimbabwe', data: 'ZZ', img: 'images/2.png' },
        { value: 'Moscow', data: 'MSK', img: 'images/2.png' },
    ];

4) К строке поиска обращаюсь так:

$('#word-search').autocomplete({
        lookup: countries,
        lookupLimit: 3,
    });

5) При вводе в строке поиска символа "а" выводятся города, в которых есть "а" - правильно работает.
6) Необходимо список результата видоизменить: сделать с помощью ul>li и в каждый результат добавить изображение.
Делаю так (пока попытка с ul). Пример взят отсюда:

$('#word-search').autocomplete({
        lookup: countries,
        dataType: 'json'
    })
    .autocomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .append("<div>" + item + "<br>" + "</div>")
        .appendTo(ul);
    }

В результате по совпадению с "а" выводятся города, но не в ul

Подскажите, пожалуйста, каким образом возможно видеоизменить результат отображения?

Comments

[Stalker_RED]

Вы не пробовали загуглить "jQuery autocomplete icons"? Там примеров полно.

Answer 1

[malayamarisha]

Вдруг кому полезно будет:

$('#word-search').autocomplete({
        lookup: countries,
        minLength: 1,
        lookupLimit: 3,
        dataType: 'json',
        appendTo: '#search__result', // контейнер, куда будут добавляться предложения
        showNoSuggestionNotice: true, // при отсутствии подходящих результатов отображать метку уведомления
        noSuggestionNotice: 'Все результаты', // Text или htmlString или Element или объект jQuery для отсутствия соответствующей метки результатов
        formatResult: function(suggestion, currentValue){ // пользовательская функция для форматирования записи предложения внутри контейнера предложений
            return "<div class='search__autocomplete'>" +
                        "<img src=/"+suggestion.img+">" +
                        "<div class='search__autocomplete-info'>"+
                            "<span>"+suggestion.value+"</span>"+
                            "<span>"+suggestion.color+"</span>"+
                        "</div>" +
                    "</div>";
        }
    })