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

Question

Я имею в виду этот плагин: 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>

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

Answer 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

Answer 2

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

Хитрость:

1. Используйте это расширение jquery: код github

2. Затем в опции автозаполнения введите

   html:true
   
   ...autocomplete({
   ...
   html:true
   ...
   }
   

   );

3. Теперь вы можете передать html (как

   sample
   ) в поле «label» вывода JSON для автозаполнения.

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

1. Сохраните плагин (html-расширение Скотта Гонсалеса) в js-файл или загрузите js-файл.
2. Вы уже добавили скрипт автозаполнения jquery-ui на html-страницу (или в jquery).-ui JS файл).Добавьте этот скрипт плагина после автозаполнения javascript-файла.

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

Answer 3

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

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