向 jQuery UI 的 ui-autocomplete Combobox Div 添加自定义类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19456501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a Custom Class to jQuery UI's ui-autocomplete Combobox Div
提问by Colin
How do I add a custom class to the ui-autocomplete div? I have multiple autocomplete widgets loading on my page and some of their drop downs need to be styled differently so I can't just edit the ui-autocomplete class. I am working with the jQuery UI combobox code (http://jqueryui.com/autocomplete/#combobox) and, by altering that code, I would like to add a class to the created ui-autocomplete div.
如何将自定义类添加到 ui-autocomplete div？我的页面上加载了多个自动完成小部件，其中一些下拉菜单需要采用不同的样式，因此我不能只编辑 ui-autocomplete 类。我正在使用 jQuery UI 组合框代码 ( http://jqueryui.com/autocomplete/#combobox)，并且通过更改该代码，我想向创建的 ui-autocomplete div 添加一个类。
回答by Ramesh
$("#auto").autocomplete({
source: ...
}).autocomplete( "widget" ).addClass( "your_custom_class" );
回答by Alex
Sorry for delay). Have a look at code below.
不好意思推迟了）。看看下面的代码。
$(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);
};
});
回答by Jonathan Potter
Simply use the classesargument:
只需使用classes参数：
$("#auto").autocomplete({
classes: {
"ui-autocomplete": "your-custom-class",
},
...
});
This means that wherever jQuery UI applies the ui-autocompleteclass it should also apply your-custom-class.
这意味着在 jQuery UI 应用ui-autocomplete类的任何地方，它也应该应用your-custom-class。
This is relevant to any jQuery UI widget, not just Autocomplete. See the documentation.
这与任何 jQuery UI 小部件相关，而不仅仅是自动完成。请参阅文档。
回答by Alex
Use this method to add custom classes to drop down box
使用此方法将自定义类添加到下拉框
_renderMenu: function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
$( ul ).find( "li:odd" ).addClass( "odd" );
}
回答by Guilherme Moreira
I managed to get it working by following the documentationand by updating my jquery version to v1.12.4 at least (required by jquery classes options) and then updating also the jquery-ui version accordingly (v1.12.1)
我设法通过遵循文档并至少将我的 jquery 版本更新到 v1.12.4（jquery classes options 需要）然后相应地更新 jquery-ui 版本（v1.12.1）来使其工作
