Hi I have multiple jQuery-UI autocomplete instances running on a single page.
<div id="div1">
<input name= "city[1]" class= "city" id="city1" />
<select name = "select1" class = "zipcodes" id = "zipcodes1"></select>
</div>
<div id="div2">
<input name= "city[2]" class= "city" id="city2" />
<select name = "select2" class = "zipcodes" id = "zipcodes2"></select>
</div>
These fields are added by javascript. The autocomplete works well for the inputs. The callback populates the zipcodes field options.
select: function( event, ui ) {
$($(".city").sibling("zipcodes")).empty();
$.each(ui.item.zip, function(Index, Value){
// Populate the zipcodes fields
});
}
The problem is that it populates all the zipcode fields on the page
I tried using
(".city").autocomplete( "widget" )
to select the particular autocomplete being queried, but it still populates all the fields.
How do I identify the particular field being queried?