title: JqueryUI autocomplete input field
body: <p>I have a situation where I need to change the value of an input field when an autocomplete option has been selected from the dropdown. The problem is that the source for the autocomplete widget consists of objects that have an index and a label. The form that will send the data must take the index but display the label.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="input" name="field" type="text"&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>values = [
    {label: "aaaaaa", id: 1},
    {label: "aaabbb", id: 2},
    {label: "aaaccc", id: 3},
  ];
  
  $("#input").autocomplete({
    source: values,
    select: function (event, ui){
      // change #input to ui.item.id
    }
  });
  </code></pre>
  
  <p>(<a href="http://jsfiddle.net/2uszu4ud/6/" rel="nofollow">JSFiddle</a>)</p>
  
  <p>When submit the form should contain the index not the label in the input field.</p>
  
  <p>My first thought was changing the input element's value in the select event, which worked in HTML but the submit data did not reflect the change, which made me think that the widget is wrapping the input field and storing the data somewhere else. Also, selecting a value from the autocorrect dropdown does not change the input element's value.</p>
  
  <p>Any ideas?</p>