title: jquery autocomplete not showing the selected value in textbox
body: <p>I am creating a search bar using jquery autocomplete.</p>
  
  <p>Here is my autocomplete code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $(function () {
              $(".txtSearch").autocomplete(
              {
                  source: function (request, response) {
                      $.ajax({
                          url: '@Url.Action("AutoComplete", "components")',
                          type: "GET",
                          data: request,
                          success: function (data) {
                              response($.map(data, function (el) {
                                  return {
                                      label: el.autoSuggest,
                                      value: el.resultCount
                                  };
                              }));
                          }
                      });
                  },
                  minLength: 3,
                  select: function (event, ui) {
                      $(this).val(ui.item.label);
                      var values = ui.item.label;
                      $.ajax({
                          type: 'GET',
                          contentType: 'application/json',
                          cache: false,
                          url: '@Url.Action("SearchFunc", "components")',
                          dataType: 'json',
                          data: { searchTerm: values }
                      }).done(function (result) {
  
                          window.location.href = "search.aspx?pass=" + encodeURIComponent(result);
                      })
                  }
              }).data("ui-autocomplete")._renderItem = function (ul, item) {
                  return $("&lt;li&gt;&lt;/li&gt;")
              .data("ui-autocomplete-item", item)
              .append("&lt;a&gt;&lt;table width='100%'&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;" + item.label + "&lt;/strong&gt;&lt;/td&gt;&lt;td align='right' style='font-size: 10px;'&gt;" + item.value + "&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;")
              .appendTo(ul);
              };
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>For example if anyone starts typing 'shi', the autocomplete shows output like this:</p>
  
  <pre><code>shirts      2results
  tshirts     3results
  </code></pre>
  
  <p>My problem is that when i select any auto-suggest options, the <strong>text-box shows only the value and not the label</strong>.</p>
  
  <p>For example in the above case, if I select <strong>shirts</strong>, the text-box shows <strong>2results</strong>.
  But the parameter passed in my 2nd ajax function is correct i.e. shirts</p>
  
  <p>Can anyone suggest a solution?</p>