JQuery autocomplete - пользовательский html для списка результатов

Я имею в виду этот плагин: http://jqueryui.com/demos/autocomplete/

Итак, исходная структура результатов

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

Мне нужно сделать ссылки внутри, чтобы выглядеть примерно так:

<a class="myclass" customattribute="something"> The item </a>

Пожалуйста, не говорите мне единственное решение для редактирования плагина, потому что я не хочу иметь одинаковый формат для всех автозаполнений на сайте.

Ответы

Ответ 1

Вам нужно заменить метод _renderItem (для рассматриваемого автозаполнения):

$("selector").autocomplete({ ... })
   .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a class='myclass' customattribute='" + item.customattribute + "'>" + item.label + "</a>" )
            .appendTo( ul );
   };

(при условии, что items в вашем source имеет свойство, называемое customattribute)

Как показано в этом примере: http://jqueryui.com/demos/autocomplete/#custom-data

Ответ 2

Это также задокументировано в документации по автозаполнению jquery-ui по адресу: Jquery-autocomplete.

Трюк:

Используйте это расширение jquery: код github
Затем в опции автозаполнения пройдите
```
html:true

...autocomplete({
...
html:true
...
}
```
);
Теперь вы можете передать html (например, <div> sample </div> ) в поле "label" вывода JSON для автозаполнения.

Если вы не знаете, как добавить плагин в JQuery, то:

Сохраните плагин (расширение html Scott González) в файле js или загрузите файл js.
Вы уже добавили автозаполнение jquery-ui script на странице html (или jquery-ui js file). Добавьте этот плагин script после этого файла автозаполнения javascript.

Дата публикации: 28 июля 2013 г.

Ответ 3

Вы можете попробовать добавить атрибуты с событием "open":

$( ".selector" ).autocomplete({
    open: function(event, ui) {
        var jArrEl = $("a.ui-corner-all");
        jArrEl.addClass("myclass");
        jArrEl.attr("customattribute","something");
    }
});