Question

From the jQuery UI documentation:

widget

.autocomplete( "widget" )
Returns the .ui-autocomplete element.

How can I use this in conjunction with actually specifying parameters for the autocomplete? I have a scenario such as this:

$("#employees").autocomplete({
    source: '/roster/home/search'
});

I would like to add a specific CSS class to the ui-autocomplete. I know I can specify a new .ui-autocomplete css class, but that isn’t what I need to do. I need to add an existing css class to it. The ‘widget’ thing seemed to be the appropriate approach, but I’m confused as to how it would be used. Any suggestions? The documentation doesn’t make this very clear at all.

Answer 1

.autocomplete("widget") returns a jQuery object that’s a wrapper for the actual
class="ui-autocomplete" element it creates, so you can just call .addClass() on it, like this:

$("#employees").autocomplete("widget").addClass("myClass");

You can test it out here, in your case you can chain it as well:

    $("#employees").autocomplete({
        source: '/roster/home/search'
    }).autocomplete("widget").addClass("myClass");