Jquery Autocomplete

Jquery Autocomplete

I'm using jquery autocomplete and it's working fine but I want to use bootstrap <table> in the dropdown list
it worked fine in display but I cannot use <li></li> in <tbody></tbody> so I couldn't get the selected value 
the following is the code 

  1. <div class="col-4">
  2.             <div class="input-group">
  3.                 <span class="input-group-addon"><i class="fa fa-user"></i></span>
  4.                 <input id="txt_Search" type="text" class="form-control" />

  6.                 <span class="input-group-addon"><i class="fa fa-search"></i></span>
  7.             </div>

  9.         </div>
and for jquery code

  1.   <script>
  2.          $(document).ready(function () {
  3.             
  4.              $.widget('custom.mcautocomplete', $.ui.autocomplete, {
  5.                  _create: function () {
  6.                      this._super();
  7.                      this.widget().menu("option", "items", "> :not(.ui-widget-header)");
  8.                  },
  9.                  _renderMenu: function (ul, items) {
  10.                      var self = this,
  11.                          thead;
  12.                      if (this.options.showHeader) {
  13.                          table = $('<div class="table-responsive"></div>');
  14.                          t1 = $('<table class="table  table-hover"></table>').appendTo(table);
  15.                          t2 = $('<thead></thead>').appendTo(t1);
  16.                          tr1 = $('<tr></tr>').appendTo(t2);
  17.                          $.each(this.options.columns, function (index, item) {

  19.                              $('<th>' + item.name + '</th>').appendTo(tr1);
  20.                          });
  21.                          tbody = $('<tbody></tbody>').appendTo(t1);

  23.                          ul.append(table);
  24.                      }
  25.                      $.each(items, function (index, item) {
  26.                          self._renderItem(ul, item);
  27.                      });
  28.                  },
  29.                  _renderItem: function (ul, item) {
  30.                      var t = '',
  31.                          result = '';

  33.                      tr2 = $('<tr></tr>').appendTo(tbody).data('ui-autocomplete-item', item);

  35.                      $.each(this.options.columns, function (index, column) {
  36.                          td1 = $('<td>' + item[column.valueField ? column.valueField : index] + '</td>').appendTo(tr2);
  37.                          t += '<td>' + item[column.valueField ? column.valueField : index] + '</td>'


  40.                      });
  41.                      result = $('<li></li>')
  42.                          .data('ui-autocomplete-item', item)
  43.                          .append('<a class="mcacAnchor"><tr>' + t + '<div style="clear: both;"></div></tr></a>')
  44.                          .appendTo(ul);

  46.                      return result;
  47.                  }
  48.              });
  49.              $("#txt_Search").mcautocomplete({
  50.                  showHeader: true,
  51.                  columns: [{
  52.                      name: 'NATIONALID',
  53.                      width: '150px',
  54.                      valueField: 'NATIONALID'
  55.                  }, {
  56.                      name: 'CustomerName',
  57.                      width: '500px',
  58.                      valueField: 'CustomerName'
  59.                  }, {
  60.                      name: 'LastRentDate',
  61.                      width: '300px',
  62.                      valueField: 'LastRentDate'
  63.                  }],
  64.                  source: function (request, response) {
  65.                      $.ajax({
  66.                          url: '<%=ResolveUrl("~/AjaxControls/AjaxOperations.asmx/SearchCustomer") %>',
  67.                         data: "{ 'p_CustName': '" + request.term + "'}",
  68.                         dataType: "json",
  69.                         type: "POST",
  70.                         contentType: "application/json",
  71.                         success: function (data) {
  72.                             response($.map(data.d, function (item) {
  73.                                 return {

  75.                                     CustomerID: item.split('||')[0],
  76.                                     NATIONALID: item.split('||')[1],
  77.                                     CustomerName: item.split('||')[2],
  78.                                     ExpirationDate: item.split('||')[3],
  79.                                     NATIONALITY_DESCR: item.split('||')[4],
  80.                                     CustomersDebits: item.split('||')[5],
  81.                                     LastRentDate: item.split('||')[6]

  83.                                 }
  84.                             }))
  85.                         },
  86.                         error: function (response) {
  87.                             alert(response.responseText);
  88.                         },
  89.                         failure: function (response) {
  90.                             alert(response.responseText);
  91.                         }
  92.                     });
  93.                 },
  94.                 focus: function (event, ui) {
  95.                     $("#txt_Search").val(ui.item.CustomerName);
  96.                     return false;
  97.                 },
  98.                 select: function (e, ui) {

  100.                     $("#txt_Search").val(ui.item.CustomerName);
  101.                     $("#Customerid").val(ui.item.CustomerID);
  102.                     return false;
  103.                 },
  104.                 minLength: 1

  106.             })

  108.         });

  110.        

  112.     </script>
and this is a print screen for result