title: How to show autocomplete list in tabular format with multiple column?
body: <p>I have autocomplete function on a textbox.I want to show more data in tabular format with new column.</p>
  
  <p>My code till now :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      function CNo(sender, args) {
          $(function () {
              $("#&lt;%=txtCNo.ClientID %&gt;").autocomplete({
                  source: function (request, response) {
                      $.ajax({
                          url: '&lt;%=ResolveUrl("~/Webservice.asmx/GettxtCNo") %&gt;',
                          data: "{ 'prefix': '" + request.term + "'}",
                          dataType: "json",
                          type: "POST",
                          async: false,
                          mustMatch: true,
                          contentType: "application/json; charset=utf-8",
                          success: function (data) {
                              response($.map(data.d, function (item) {
                                  return {
                                      label: item.split('^')[0],
                                      val: item.split('^')[1]
                                  }
                              }))
                          },
                          error: function (response) {
  
                          },
                          failure: function (response) {
  
                          }
                      });
                      $.ui.autocomplete.prototype._renderMenu = function (ul, items) {
                      var self = this;
                      ul.append("&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;City&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt;");
                      $.each(items, function (index, item) {
                          self._renderItem(ul.find("table tbody"), item);
                      });
                  };
  
                  $.ui.autocomplete.prototype._renderItem = function (table, item) {
                 return $("&lt;tr&gt;&lt;/tr&gt;")
                .data("item.autocomplete", item)
                .append("&lt;td&gt;" + item.value + "&lt;/td&gt;" + "&lt;td&gt;" + item.val.split('~')[6] +  "&lt;/td&gt;")
                .appendTo(table);
                  };
                  },
                  select: function (e, i) {
                      $("#&lt;%=hdnCNo.ClientID %&gt;").val(i.item.val);
                      if (i.item.val == "No Records Found") {
                          $("#&lt;%=hdnCNo.ClientID %&gt;").val(-1);
                          document.getElementById('&lt;%=txtCNo.ClientID%&gt;').value = "";
                          return false;
                      }
                      checktxtCNorinfo();
                  },
                  minLength: 0
              }).bind('focus', function () { $(this).autocomplete("search"); });
          });
      }          
  &lt;/script&gt;
  </code></pre>
  
  <p>In this code  I am getting my result in autocomplete list but unable to select any item from the list.Where am I wrong?</p>