如何以帶有多列的表格格式顯示自動完成列表？

Question

我在文本框上有自動完成功能。我想以新列的表格格式顯示更多數據。

我的代碼至今：

<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> 

在這段代碼中，我得到我的結果在自動完成列表中，但無法選擇從list.Where任何項目我錯了？

Answer 1

使用查詢像

$.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 up the multicolumn autocomplete widget. 
$("#search").mcautocomplete({ 
    // These next two options are what this plugin adds to the 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 for when a list item is 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 was ' + this.value); 
     return false; 
    }, 

    // The rest of the options are for configuring the 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 
      }, 
      // The success event handler will display "No match found" if no items are 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); 
      } 
     }); 
    } 
});