Multiple instances of jQuery autocomplete on one page

autocomplete, jquery, jquery-autocomplete

Solution

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

Problem

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.

Original source