Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

autocomplete ._renderItem and adding a Class to wrapper

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 );
    };
like image 681
Control Freak Avatar asked Feb 18 '12 01:02

Control Freak


1 Answers

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/

like image 115
Andrew Whitaker Avatar answered Sep 27 '22 21:09

Andrew Whitaker