JQuery-UI автозаполнение нескольких экземпляров

Question

Привет, у меня есть несколько экземпляров автозаполнения jQuery-UI, запущенных на одной странице.

<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>

Эти поля добавляются с помощью javascript.Автозаполнение хорошо работает для входов.Обратный вызов заполняет параметры поля почтовых индексов.

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

Проблема заключается в том, что он заполняет все поля почтового индекса на странице

Я пытался использовать

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

, чтобы выбрать конкретное запрашиваемое автозаполнение, но оно по-прежнему заполняет все поля.

Как определить конкретное запрашиваемое поле?

Answer 1

Попробуйте:

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

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