JQuery UI Автозаполнение форматирования для нескольких элементов

Question

У меня есть настройка автозаполнения jQuery UI на мой вкус и она отлично работает, но есть один фатальный недостаток. В автозаполнении я использую пользовательский дисплей , как в этом примере . У меня есть нечто очень похожее, но с исключением ...

Единственная разница в том, что у меня есть несколько элементов автозаполнения одного класса на одной странице. Только первый элемент показывает дополнительную строку данных, остальные - только базовое автозаполнение.

Я могу получить желаемый результат, просто перебрав все эти элементы класса и вызвав автозаполнение для них, но я надеялся, что есть лучший способ вызвать его один раз и заставить его «просто работать».

Вот как я добавляю дополнительную строку:

.data( 'autocomplete' )._renderItem = function( ul, item ) {
  return $( '<li></li>' )
  .data( 'item.autocomplete', item )
  .append( '<a>' + item.label + '<br/><small>' + item.desc + '<small></a>' )
  .appendTo( ul );
};

Должен заметить, что я не получаю никаких исключений для консоли вообще.

Answer 1

В качестве альтернативы:

$(..).autocomplete(..).each(function () {
   $.data(this, "autocomplete")._renderItem = function (ul, item) { ... } })

Answer 2

Вам просто нужно переопределить функцию через объект прототип , вместо одного экземпляра .

$.ui.autocomplete.prototype._renderItem = function( ul, item ) {
  return $( '<li></li>' )
  .data( 'item.autocomplete', item )
  .append( '<a>' + item.label + '<br/><small>' + item.desc + '<small></a>' )
  .appendTo( ul );
};

Перезаписать функцию перед активацией любых автозаполнений, но после загрузки скрипта.

Answer 3

Единственный способ сделать эту работу - изменить код с:

addautocomplete($('.tagEntry'));

Кому:

$('.tagEntry').each(function() {
     addautocomplete(this);
});