将自定义类添加到jQuery UI的ui-autocomplete Combobox Div

Question

如何向ui-autocomplete div添加自定义类？我在我的页面上加载了多个自动完成小部件,并且他们的一些下拉菜单需要设置不同的样式,所以我不能只编辑ui-autocomplete类.我正在使用jQuery UI组合框代码(http://jqueryui.com/autocomplete/#combobox),并且通过更改该代码,我想在创建的ui-autocomplete div中添加一个类.

Answer 1

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

Answer 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);
    };
});

Answer 3

只需使用classes参数:

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

这意味着无论jQuery UI应用于哪个ui-autocomplete类,它都应该适用your-custom-class.

这与任何jQuery UI小部件相关,而不仅仅是自动完成.请参阅文档.