it-swarm.com.ru

Добавление пользовательского класса в пользовательский интерфейс пользовательского интерфейса jQuery Autocomplete Div

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

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

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

$(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);
    };
});
14
Alex

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

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

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

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

5
Jonathan Potter

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

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