Scriptaculous: Multiple autocompleter fields

Question

I need to find a way of adding five autocompleter HTML fields to a web form. I have one working perfectly, but when I repeat the code it doesn't work. I'm sure there's a very simply answer to this, but my Javascript newbishness has led be down the wrong path.

Thanks for any help. Here's the JS code:

window.onload = function() {
new Ajax.Autocompleter('venue0', 'venue_choices', 'venue_search.php', {
  paramName: 'q',
    minChars: 2,
    frequency: 0.4,
    indicator: 'loading'
    });                
new Ajax.Autocompleter('venue1', 'venue_choices', 'venue_search.php', {
  paramName: 'q',
    minChars: 2,
    frequency: 0.4,
    indicator: 'loading'
    });
new Ajax.Autocompleter('venue2', 'venue_choices', 'venue_search.php', {
  paramName: 'q',
    minChars: 2,
    frequency: 0.4,
    indicator: 'loading'
    });
new Ajax.Autocompleter('venue3', 'venue_choices', 'venue_search.php', {
  paramName: 'q',
    minChars: 2,
    frequency: 0.4,
    indicator: 'loading'
    });                    
new Ajax.Autocompleter('venue4', 'venue_choices', 'venue_search.php', {
  paramName: 'q',
    minChars: 2,
    frequency: 0.4,
    indicator: 'loading'
    });                    
};       

Here's the relevant HTML:

<input name="venue0" type="text" id="venue0" value="" />
<input name="venue1" type="text" id="venue1" value="" />
<input name="venue2" type="text" id="venue2" value="" />
<input name="venue3" type="text" id="venue3" value="" />
<input name="venue4" type="text" id="venue4" value="" />
<p id="loading" style="display:none">
    <img alt="Searching..." src="static/images/thinking.gif" />
</p>
<div id="venue_choices" style="z-index:1;"></div> 

As I say, venue0 works perfectly, but the others don't elicit any reaction from JQuery. What silly thing have I done?

Answer 1

I ended up using a different solution: Putting all the same autocompleter options in one input box (very much like the "tags" on this site). Seems to work fine!