JQuery UI: autocomplete on multiple fields, using different sources

Question

I have a page with several forms that load via ajax. Each form includes one text field that needs to be autocompleted. Each text has a data attribute for its autocomplete. For instance:

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

There may be many, they will belong to different forms and modify different records, but the autocomplete field will have the same class.

If I call autocomplete on them like this ...

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

... then jQuery UI combines the sources from each field into one main list. I tried calling instead ...

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

... which I was hoping to capture a source from my own parent, but that did not work at all. Since these fields are added to the page via ajax, I do not know in advance what their individual identifiers will be, only the class. There can be many or few, it depends only on what the user does.

How would you solve this?

Answer 1

You need to call autocomplete separately for each element:

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