autocomplete ._renderItem and adding a Class to wrapper

Question

Going off the example here http://jqueryui.com/demos/autocomplete/#custom-data I\'m wondering how to add a style to the ul wrapper when using _renderItem(

Answer 1

When using jQuery UI 1.10, I used Andrew Whitaker's answer, but I had to change

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

to

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

Answer 2

Here would be one simple way to do it, tapping into the open event:

$("#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 is an internal widget that autocomplete uses.

Example: http://jsfiddle.net/bx8Ye/

Answer 3

If you want to add a style to the ul wrapper then you need to overload _renderMenu() and not _renderItem().

Here is an example that sets the width of the UL and adds a footer as the last li in the ul

.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>");
};