自动完成._renderItem并将一个Class添加到包装器

在这里关闭示例http://jqueryui.com/demos/autocomplete/#custom-data我想知道如何在使用_renderItem()时向ul包装器添加样式：

  .data( "autocomplete" )._renderItem = function( ul, item ) { return $( "
" ) .data( "item.autocomplete", item ) .append( "" + item.label + "
" + item.desc + "" ) .appendTo( ul ); }; 

Answer 1

这将是一个简单的方法，利用open事件：

 $("#auto").autocomplete({ source: /* ... */, open: function () { $(this).data("autocomplete").menu.element.addClass("my_class"); } }); 

jQueryUI> = 1.9

 $("#auto").autocomplete({ source: /* ... */, open: function () { $(this).data("uiAutocomplete").menu.element.addClass("my_class"); } }); 

menu是自动完成使用的内部窗口小部件。

示例： http ： //jsfiddle.net/bx8Ye/

Answer 2

如果要为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("
some footer text
"); }; 

Answer 3

当使用jQuery UI 1.10时，我使用了Andrew Whitaker的答案，但我不得不改变

 $(this).data("autocomplete").menu.element.addClass("my_class"); 

至

 $(this).data("uiAutocomplete").menu.element.addClass("my_class");