title: JQuery UI Autocomplete - How to select an item and mantain the label (not the value) in the input text
body: <p>I´m trying to use the JQuery UI Autocomplete plugin (<a href="http://jqueryui.com/demos/autocomplete/" rel="noreferrer">click to see the demo page of JQuery UI Autocomplete plugin</a>)</p>
  
  <p>I´m using as datasource a list of objects as bellow:</p>
  
  <pre><code>            var availableTags = [
                   {label: "Sao Paulo", value: "SP"},
                   {label: "Sorocaba", value: "SO"},
                   {label: "Paulinia", value: "PA"},
                   {label: "São Roque", value: "SR"}
              ];  
  </code></pre>
  
  <p>The problem is that when I select an item, the value of the datasource is set to the input field and not the label. I´ve created a handle to the select to save the item value in a hidden field and set the label to the input field, but this event is fired too soon by the plugin and the value is re-set to the input field.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" /&gt;    
          &lt;link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" /&gt;    
          &lt;style&gt;
              .ui-menu-item
              {
                  font-size: 12px;
              }
          &lt;/style&gt;
          &lt;script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  var availableTags = [
                       {label: "Sao Paulo", value: "SP"},
                       {label: "Sorocaba", value: "SO"},
                       {label: "Paulinia", value: "PA"},
                       {label: "São Roque", value: "SR"}
                  ];   
  
                  $("#txtCidade").autocomplete({ minLength: 0,
                                                 source: availableTags);     
              });
  
              function OnSelect(event, ui)
              {
                  var item = ui.item;
                  var itemLabel = item.label;
                  var itemValue = item.value;
  
                  $("#hidCidade").val(itemValue);
                  $("#txtCidade").val(itemLabel);
              }
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form&gt;
              &lt;input id="hidCidade" type="hidden" /&gt;
              &lt;input id="txtCidade" type="input" class="ui-autocomplete-input" /&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please, could someone help me with this?</p>
  
  <p>Thanks! </p>