Jquery-ui autocomplete plusieurs instances

Question

Salut J'ai plusieurs instances de saisie semi-automatique jQuery-UI s'exécutant sur une seule 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> 

Ces champs sont ajoutés par javascript. La saisie semi-automatique fonctionne bien pour les entrées. Le rappel remplit les options de champ zipcodes.

select: function(event, ui) { 
    $($(".city").sibling("zipcodes")).empty(); 
    $.each(ui.item.zip, function(Index, Value){ 
     // Populate the zipcodes fields 
     }); 
     } 

Le problème est qu'il remplit tous les champs zipcode sur la page

J'ai essayé d'utiliser

(".city").autocomplete("widget") 

pour sélectionner le autocomplete particulier interrogée, mais il remplit toujours toutes les des champs.

Comment identifier le champ particulier interrogé?

Answer 1

Essayez:

select: function(event, ui) { 
    $(this).sibling(".zipcodes").empty(); 

     $.each(ui.item.zip, function(Index, Value){ 
     // Populate the zipcodes fields 
      $(this).sibling(".zipcodes") ....... 
     }); 
     }