17

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

4

5 回答 5

22 
$("#auto").autocomplete({
    source: ...
}).autocomplete( "widget" ).addClass( "your_custom_class" );
于 2014-09-29T13:44:54.443 回答
15

不好意思推迟了）。看看下面的代码。 

$(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);
    };
});
于 2013-10-23T18:43:11.397 回答
15

只需使用classes参数：

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

这意味着无论 jQuery UI 在哪里应用ui-autocomplete该类，它也应该应用your-custom-class。

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

于 2017-02-15T16:25:07.213 回答
1

使用此方法将自定义类添加到下拉框

_renderMenu: function( ul, items ) {
    var that = this;
    $.each( items, function( index, item ) {
        that._renderItemData( ul, item );
    });
    $( ul ).find( "li:odd" ).addClass( "odd" );
}
于 2013-10-18T19:57:40.073 回答
-2

我设法通过遵循文档并将我的 jquery 版本至少更新到 v1.12.4（jquery 类选项需要）然后相应地更新 jquery-ui 版本（v1.12.1）来使其工作

于 2018-11-08T14:00:08.900 回答