在这里取消示例http://jqueryui.com/demos/autocomplete/#custom-data
我想知道如何在使用ul
时为_renderItem()
包装器添加样式:
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
答案 0 :(得分:26)
这是一种简单的方法,点击open
事件:
$("#auto").autocomplete({
source: /* ... */,
open: function () {
$(this).data("autocomplete").menu.element.addClass("my_class");
}
});
$("#auto").autocomplete({
source: /* ... */,
open: function () {
$(this).data("uiAutocomplete").menu.element.addClass("my_class");
}
});
menu
是自动填充使用的内部窗口小部件。
答案 1 :(得分:3)
如果要为ul包装器添加样式,则需要重载_renderMenu()而不是_renderItem()。
这是一个设置UL宽度的示例,并添加一个页脚作为ul中的最后一个li
.data( "autocomplete" )._renderMenu = function( ul, data ) {
var self = this;
$(ul).css('width', settings.dropDownWidth);
$.each( data, function( index, item ) {
self._renderItem( ul, item );
});
$(ul).append("<div class='myFooter'>some footer text</div>");
};
答案 2 :(得分:1)
使用jQuery UI 1.10时,我使用了Andrew Whitaker的答案,但我不得不改变
$(this).data("autocomplete").menu.element.addClass("my_class");
到
$(this).data("uiAutocomplete").menu.element.addClass("my_class");