jQuery UI：在多个字段上自动完成，使用不同的源

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 UI将每个字段的源合并到一个主列表中。我试着打电话......

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

...我希望从自己的父母那里获取资源，但这根本不起作用。因为这些字段是通过ajax添加到页面的，所以我事先并不知道他们的个人ID是什么，只有课程。可能有很多或很少，它只取决于用户在做什么。

你会如何解决这个问题？

Answer 1

您需要为每个元素单独调用autocomplete：

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