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

时间:2012-02-18 01:46:43

标签: jquery jquery-ui jquery-autocomplete jquery-ui-autocomplete

在这里取消示例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 );
    };

3 个答案:

答案 0 :(得分:26)

这是一种简单的方法,点击open事件:

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

jQueryUI&gt; = 1.9

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

menu是自动填充使用的内部窗口小部件。

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

答案 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");