Добавление пользовательского класса в jQuery UI ui-autocomplete Combobox Div

Как добавить пользовательский класс в div-автозаполнение? У меня есть несколько загрузок виджета автозаполнения на моей странице, и некоторые из их выпадающих списков нужно стилизовать по-разному, поэтому я не могу просто отредактировать класс ui-autocomplete. Я работаю с кодом компиляции jQuery UI (http://jqueryui.com/autocomplete/#combobox), и, изменив этот код, я хотел бы добавить класс к созданному div-автозаполнению ui-autocomplete.

Ответ 1

$("#auto").autocomplete({
    source: ...
}).autocomplete( "widget" ).addClass( "your_custom_class" );

Ответ 2

Извините за задержку). Посмотрите на код ниже.

$(function () {
    $("#auto").autocomplete({
        source: ['aa', 'bb', 'cc', 'dd']
    }).data("ui-autocomplete")._renderItem = function (ul, item) {

        ul.addClass('customClass'); //Ul custom class here

        return $("<li></li>")
        .addClass(item.customClass) //item based custom class to li here
        .append("<a href='#'>" + item.label + "</a>")
        .data("ui-autocomplete-item", item)
        .appendTo(ul);
    };
});

Ответ 3

Просто используйте аргумент classes:

$("#auto").autocomplete({
    classes: {
        "ui-autocomplete": "your-custom-class",
    },
    ...
});

Это означает, что везде, где jQuery UI применяет класс ui-autocomplete, он также должен применять your-custom-class.

Это относится к любому виджету пользовательского интерфейса jQuery, а не только к автозаполнению. См. Документацию .

Ответ 4

Используйте этот метод для добавления отдельных классов в раскрывающийся список

_renderMenu: function( ul, items ) {
    var that = this;
    $.each( items, function( index, item ) {
        that._renderItemData( ul, item );
    });
    $( ul ).find( "li:odd" ).addClass( "odd" );
}