Как установить * один * экземпляр автозаполнения на странице?

Question

Этот ответ - jQueryUI: как я могу отформатировать результаты плагина автозаполнения? - описывает, как обезопасить виджет автозаполнения jqueryUI, чтобы он отображал вещи определенным образом.Подход, который он использует, заключается в замене функции на $.ui.autocomplete.prototype.

Это означает, что все виджеты автозаполнения получат этот патч.

Есть ли способ исправить виджет автозаполнения для только одного элемента ввода ?Что это?

Когда я проверяю $('$input').autocomplete, я не вижу там ни одного из автозаполнений (_renderItem, _renderMenu, _search и т. Д.).

Answer 1

Проверьте пользовательские данные и демонстрацию демонстрации .Эта демонстрация не изменяет объект-прототип виджета автозаполнения, это означает, что выполняется только этот экземпляр виджета:

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

Вот рабочая демонстрация: http://jsfiddle.net/vJSwq/

Answer 2

Код от Эндрю Уитакера просто работает для одного автозаполнения ввода.Если вы выберете более одного элемента ввода, второй виджет автозаполнения не будет отображать никаких записей.Вы должны добавить foreach , чтобы обработать все выбранные элементы ввода, как указано здесь

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

Answer 3

Для последних версий jQuery (1.8+) / jQuery UI (1.10+) вы должны использовать:

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