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>

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

24
autocomplete jquery jquery-ui jquery-ui-autocomplete

3 ответов

нужно заменить на _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

40

это также задокументировано в документации автозаполнения jQuery-ui по адресу:Jquery-автозаполнение.

фокус в том, что:

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

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

    html:true

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

    );

  3. теперь вы можете передать html (например, sample) в поле" label " вывода JSON для автозаполнения.

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

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

дата публикации: 28 июля,

4

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

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