Question

I try to use jQUery-UI autocomplete plugin with a list of inputs that have the same id.

The list is like this:

<input type="text" name="cod[]" id="cod"/>
<input type="text" name="cod[]" id="cod"/>
<input type="text" name="cod[]" id="cod"/>
<input type="text" name="cod[]" id="cod"/>

My script.js function look like this:

$("#cod_prod").autocomplete({
source:getCods
});

Where getCods is a function that load data from a DB with $.ajax method of jQuery.

This work, i try it in other input … but when i try with this list of multiple input field the plugin only work with the first field.

Any idea of how can i accomplish this?

Thanks in advance

Answer 1

ID’s need to be unique. Use a class.
Since your ID’s are not unique, that is why it only works with the first instance of it in the DOM.

<input type="text" name="cod[]" class="cod"/>
<input type="text" name="cod[]" class="cod"/>
<input type="text" name="cod[]" class="cod"/>
<input type="text" name="cod[]" class="cod"/>


$(".cod").autocomplete({
   source:getCods
});