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

Question

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

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

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

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

.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

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

addautocomplete($('.tagEntry'));

Для того, чтобы:

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

Answer 2

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

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

Answer 3

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

$.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 4

У меня была та же проблема, что и у sshefer, и я нашел для нее лучшее решение:

Изменить

.autocomplete("экземпляр")._renderItem = функция(ul, item)

по

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