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():

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

Andrew Whitaker · Accepted Answer · 2013-05-23T13:08:12.980

26

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/

edited May 23 '13 at 13:08

answered Feb 18 '12 at 02:58

Andrew Whitaker

124,656
32
289
307

2

Just use `$(this).data('uiAutocomplete')` instead of 'autocomplete' for these versions. – Armin May 23 '13 at 11:35

sngregory · Answer 2 · 2012-02-18T03:42:05.650

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

edited Feb 18 '12 at 03:42

answered Feb 18 '12 at 01:57

sngregory

406
2
5

ERROR: `self._renderItem( ul, item );` is not a function – Control Freak Feb 18 '12 at 02:08
ERROR: `self = this.css("width", "900px");` `this.css` is not a function – Control Freak Feb 18 '12 at 02:09
Sorry about that, it was meant as an example not something you can cut and paste and just use. – sngregory Feb 18 '12 at 03:02
here is a link to someone who answered the question better than I did... http://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results – sngregory Feb 18 '12 at 03:10
edited the answer to correct the bugs you pointed out. Let me know if that doesn't work for you. – sngregory Feb 18 '12 at 03:26
@sngregory `ul` is already a jQuery object, no need to `$(ul)` – Odys Aug 01 '14 at 19:56

ryduh · Answer 3 · 2013-05-15T13:55:35.167

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

edited May 15 '13 at 13:55

answered May 15 '13 at 13:45

ryduh

81
4

autocomplete ._renderItem and adding a Class to wrapper

3 Answers3

jQueryUI >= 1.9

Linked