Multiple instances of jQuery autocomplete on one page

Question

I'd like to style each instance of jQuery's autocomplete plugin differently on each page. Except I can't figure out how to set the styles to be different for each instance. I can't seem to wrap the ac_* styles inside a div to identify them from the CSS. Every change I make affects both. Any ideas?

Thank you.

Answer 1

Use the appendTo option to place the autocomplete list to some custom container instead of body. Then you can style it. Example:

JS:

$('#suggestions').autocomplete({source: get_suggestions, appendTo: '#my-suggestions'})

HTML:

<input type="text" id="suggestions">
<div id="my-suggestions"></div>

CSS:

#my-suggestions {
  position: absolute;
}

#my-suggestions .ui-autocomplete {
   foo: bar;
}

Answer 2

http://api.jqueryui.com/autocomplete/#method-widget

add something like this:

selector.autocomplete( "widget" ).addClass('yourclass');