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

Posted 2023-03-05

【中文标题】将自定义类添加到 jQuery UI 的 ui-autocomplete Combobox Div

【英文标题】：Adding a Custom Class to jQuery UI's ui-autocomplete Combobox Div

【发布时间】：2013-10-27 16:49:23

【问题描述】：

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

【参考方案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 UI 小部件相关，而不仅仅是自动完成。请参阅documentation。

【讨论】：

这是根据文档的最终答案。但需要注意的是，它需要 1.21.1 版本。它似乎不适用于早期版本的自动完成功能。

我认为@ron 意味着需要 1.12.1 版本，因为这是最新版本。只是为了节省其他人对文档的访问。

【参考方案4】：

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

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

【讨论】：

我将确切的 sn-p 添加到我的代码中，但什么也没发生。该方法应该何时运行？我在 _create: 方法之后立即添加了

【参考方案5】：

我设法通过遵循documentation 并将我的 jquery 版本至少更新到 v1.12.4（jquery classes options 要求）然后相应地更新 jquery-ui 版本（v1.12.1）来让它工作