title: How to get JQuery UI Autocomplete work with item id
body: <p>I have seen this post here: <a href="https://stackoverflow.com/questions/4815330/jquery-autocomplete-with-item-and-id">jQuery UI autocomplete with item and id</a> but I was not able to figure things out.</p>
  
  <p>here is my input html:</p>
  
  <pre><code>&lt;input type="text" class="tags" style="width:250px; height:24px;"&gt; &lt;/input&gt;' 
  &lt;input type="hidden" name="tags_id" id="tags_id" /&gt;
  </code></pre>
  
  <p>here is my ajax call:</p>
  
  <pre><code>var data = {};
  $.get('/tags',data, function(tag_list) {
                  autocomplete_source_list = [];
  
                  for(var i = 0; i &lt; tag_list.length; i++){
                      autocomplete_source_list.push([tag_list[i].fields.display_name, [2,3,4,5,6,7,8,9,1,2]]);
                  }
                  jQuery( ".tags" ).autocomplete({
                      source: autocomplete_source_list,
                      select: function (event, ui) {
                          $(".tags").val(ui.item.label); // display the selected text
                          $(".tags_id").val(ui.item.value); // save selected id to hidden input
                          console.log("selected id: ", ui.item.label)
                      }
                  });
  
              });
  </code></pre>
  
  <p>How do I set up the ids should I pass a 2d array to source? when I give the source to be just the text then both ui.item.value = ui.item.label = "whatever text". I don't see how id's can be attached. </p>
  
  <p>Can I get some help please. Thanks</p>