jquery - How to show autocomplete list in tabular format with multiple column? -

i have autocomplete function on textbox.i want show more data in tabular format new column.

my code till :

<script type="text/javascript">      function cno(sender, args) {         $(function () {             $("#<%=txtcno.clientid %>").autocomplete({                 source: function (request, response) {                     $.ajax({                         url: '<%=resolveurl("~/webservice.asmx/gettxtcno") %>',                         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("<table><thead><tr><th>name</th><th>city</th></tr></thead><tbody></tbody></table>");                     $.each(items, function (index, item) {                         self._renderitem(ul.find("table tbody"), item);                     });                 };                  $.ui.autocomplete.prototype._renderitem = function (table, item) {                return $("<tr></tr>")               .data("item.autocomplete", item)               .append("<td>" + item.value + "</td>" + "<td>" + item.val.split('~')[6] +  "</td>")               .appendto(table);                 };                 },                 select: function (e, i) {                     $("#<%=hdncno.clientid %>").val(i.item.val);                     if (i.item.val == "no records found") {                         $("#<%=hdncno.clientid %>").val(-1);                         document.getelementbyid('<%=txtcno.clientid%>').value = "";                         return false;                     }                     checktxtcnorinfo();                 },                 minlength: 0             }).bind('focus', function () { $(this).autocomplete("search"); });         });     }           </script> 

in code getting result in autocomplete list unable select item list.where wrong?

use query like

$.widget('custom.mcautocomplete', $.ui.autocomplete, {     _rendermenu: function(ul, items) {         var self = this,             thead;          if (this.options.showheader) {             table = $('<div class="ui-widget-header" style="width:100%"></div>');             $.each(this.options.columns, function(index, item) {                 table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');             });             table.append('<div style="clear: both;"></div>');             ul.append(table);         }         $.each(items, function(index, item) {             self._renderitem(ul, item);         });     },     _renderitem: function(ul, item) {         var t = '',             result = '';          $.each(this.options.columns, function(index, column) {             t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valuefield ? column.valuefield : index] + '</span>'         });          result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacanchor">' + t + '<div style="clear: both;"></div></a>').appendto(ul);         return result;     } });   // sets multicolumn autocomplete widget. $("#search").mcautocomplete({     // these next 2 options plugin adds autocomplete widget.     showheader: true,     columns: [{         name: 'city',         width: '150px',         valuefield: 'name'},     {         name: 'state',         width: '120px',         valuefield: 'adminname1'},     {         name: 'country',         width: '120px',         valuefield: 'countryname'}],      // event handler when list item selected.     select: function(event, ui) {         this.value = (ui.item ? ui.item.name : '');         $('#results').text(ui.item ? 'selected: ' + ui.item.name + ', ' + ui.item.adminname1 + ', ' + ui.item.countryname : 'nothing selected, input ' + this.value);         return false;     },      // rest of options configuring ajax webservice call.     minlength: 1,     source: function(request, response) {         $.ajax({             url: 'http://ws.geonames.org/searchjson',             datatype: 'jsonp',             data: {                 featureclass: 'p',                 style: 'full',                 maxrows: 12,                 name_startswith: request.term             },             // success event handler display "no match found" if no items returned.             success: function(data) {                 var result;                 if (!data || data.length === 0 || !data.geonames || data.geonames.length === 0) {                     result = [{                         label: 'no match found.'}];                 }                 else {                     result = data.geonames;                 }                 response(result);             }         });     } });