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

I think you'll find that your problem is that the autocomplete drop-under list isn't placed inside of your placeholder... example:

<div class="differentStyle">
    <input type="text" class="autocomplete">
</div>

When the results come back, a new div is added to the page to display the results - but not inside your "differentStyle" division. It just gets added to the end of the DOM. For example:

<div class="differentStyle">
    <input type="text" class="autocomplete">
</div>

...
<div class="ac_results">I get added by jQuery Autocomplete!</div>
</body>

Reading the documentation, I would say that it will make overriding the style for two auto-complete boxes on the same page impossible:

http://docs.jquery.com/Plugins/Autocomplete

Answer 2

Was searching for something else when I happened across this post... I managed to do this by trapping the following autocomplete events, and adding my own class into the outer that houses the autocomplete output. Then use CSS to format the elements as necessary. Hope this helps somebody.

$input.autocomplete({
            focus : function(event, ui) {
              $(".forms-search-result").parents("ul").addClass("myClass");
              return false;
            },
            open : function(event, ui) {
              $(".forms-search-result").parents("ul").addClass("myClass");
            },

Example css:

.myClass a.ui-corner-all { font-weight:bold; }

Also as part of my JSON results, I simply pass back (from my JAVA AJAX Action) the HTML shell with the result embedded in it as part of the actual JSON "result". That way I can create elaborate HTML around each results, and then use the above method to format them the way I want.

Answer 3

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

add something like this:

selector.autocomplete( "widget" ).addclass('yourClass');