自动完成 ._renderItem 并向包装器添加一个类答案

【问题标题】：autocomplete ._renderItem and adding a Class to wrapper自动完成 ._renderItem 并向包装器添加一个类
【发布时间】：2012-03-09 09:59:27
【问题描述】：

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

    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };

【问题讨论】：

标签： jquery jquery-ui jquery-autocomplete jquery-ui-autocomplete

【解决方案1】：

如果你想给 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>");
};

【讨论】：

错误：self._renderItem( ul, item ); 不是函数
错误：self = this.css("width", "900px"); this.css 不是函数
很抱歉，这只是一个示例，您不能剪切和粘贴然后使用。
这是一个比我回答问题更好的人的链接...stackoverflow.com/questions/2435964/…
编辑了答案以纠正您指出的错误。如果这对你不起作用，请告诉我。

【解决方案2】：

这是一种简单的方法，利用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/

【讨论】：

对于这些版本，只需使用 $(this).data('uiAutocomplete') 而不是“自动完成”。

【解决方案3】：

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

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

到

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

【讨论】：