title: jQuery UI: Autocomplete on multiple fields, use different sources
body: <p>I've got a page with multiple forms that load via ajax. Each form includes one text field that needs to autocomplete. Each text has a data attribute for its autocomplete source. For instance:</p>
  
  <pre><code>&lt;input type="text" class="district_name" data-autocomplete-source="['foo','bar','baz']" ... /&gt;
  </code></pre>
  
  <p>There could be many of these, they would belong to different forms and modify different records, but the autocomplete field will have the same class.</p>
  
  <p>If I call autocomplete on these like so...</p>
  
  <pre><code>$('input.district_name').autocomplete({
    source: $('input.district_name').data('autocomplete-source')
  });
  </code></pre>
  
  <p>... then jQuery UI merges the sources from each field to one master list. I tried instead calling...</p>
  
  <pre><code>$('input.district_name').autocomplete({
    source: $( this ).data('autocomplete-source')
  });
  </code></pre>
  
  <p>... which I was hoping would grab the source from its own parent, but that didn't work at all. Because these fields are added to the page via ajax I don't know in advance what their individual IDs will be, only the class. There could be many or few, it just depends on what the user is doing.</p>
  
  <p>How would you solve this?</p>