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

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

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

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

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

Ответы

Ответ 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/

Ответ 2

Код от Andrew Whitaker работает только для ввода одного. Если вы выберете более одного элемента ввода, второй виджет автозаполнения не будет показывать какие-либо записи. Вы должны добавить 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);
    };
);

Ответ 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 );
};