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

Question

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

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

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

Когда я проверяю $('$input').autocomplete Я не вижу там никаких автозаполнений fns (_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 );
};