Пользовательский интерфейс jQuery: автозаполнение нескольких полей, использование разных источников

Question

У меня есть страница с несколькими формами, которые загружаются через ajax.Каждая форма содержит одно текстовое поле, которое необходимо заполнить автоматически.Каждый текст имеет атрибут данных для своего источника автозаполнения.Например:

<input type="text" class="district_name" data-autocomplete-source="['foo','bar','baz']" ... />

Их может быть много, они принадлежат разным формам и изменяют разные записи, но поле автозаполнения будет иметь один и тот же класс.

Если я вызову автозаполнениена таких вот так ...

$('input.district_name').autocomplete({
  source: $('input.district_name').data('autocomplete-source')
});

... затем пользовательский интерфейс jQuery объединяет источники из каждого поля в один основной список.Вместо этого я попытался позвонить ...

$('input.district_name').autocomplete({
  source: $( this ).data('autocomplete-source')
});

... который я надеялся получить источник от своего родителя, но это совсем не сработало.Поскольку эти поля добавляются на страницу через ajax, я заранее не знаю, какими будут их индивидуальные идентификаторы, только класс.Их может быть много или мало, это зависит только от того, что делает пользователь.

Как бы вы решили это?

Answer 1

Вам нужно позвонить autocomplete отдельно для каждого элемента:

$('input.district_name').each(function() {
    $(this).autocomplete({
        source: $(this).data('autocomplete-source')
    });
});