title: How to add header to autocomplete tabular format data?
body: <p>I am trying to display data in autocomplete in table format.Just i am left with showing the header which user can not select.</p>
  
  <p>My code so far:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      function pageLoad(sender, args) {
          $(function () {
              $("#&lt;%=txt.ClientID %&gt;").autocomplete({
                  source: function (request, response) {
                      $.ajax({
                          url: '&lt;%=ResolveUrl("~/Webservice.asmx/GetDetails") %&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) {
  
                          }
                      });
                  },
                  select: function (e, i) {
                      $("#&lt;%=hdnC.ClientID %&gt;").val(i.item.val);
                      if (i.item.val == "No Records Found") {
                          $("#&lt;%=hdnC.ClientID %&gt;").val(-1);
                          document.getElementById('&lt;%=txt.ClientID%&gt;').value = "";
                          return false;
                      }
  
                  },
                  minLength: 0
              }).bind('focus', function () { $(this).autocomplete("search"); })
              .data("autocomplete")._renderItem = function(ul, item) {
                  return $("&lt;li&gt;&lt;/li&gt;").data("item.autocomplete", item).append("&lt;a&gt;&lt;table&gt;&lt;tr&gt;&lt;td width='200px'&gt;" + item.label + "&lt;/td&gt;" + "&lt;td&gt;" + item.val.split('~')[6] + "&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;").appendTo(ul);
  
  
               };
          });
      }
  
  &lt;/script&gt;
  </code></pre>