最近做一個專案，用到了JQuery的自動補全函式，但預設的是隻顯示一列資料，所以就略加修改，拿出來獻醜了。

   下面這個是預設呼叫本地資料：      

   $("#tags").autocomplete(["c++","java", "php", "coldfusion","javascript"],   //這個引數是一個自動補全的一個數據陣列，當你輸入一個字元，它就會把有的顯示出來，這個靜態賦值//不是很好（個人覺得）。

      {                  //下面是一些顯示效果引數
         width: 320,
         max: 4,
         highlight: false,
         multiple: true,
          multipleSeparator: "",
         scroll: true,
        scrollHeight: 300
        });

下面這個是呼叫後臺資料：

 $("#...").autocomplete({
       source: function(resquest,response){
           $.ajax({
               url:'.........',//請求地址
               type: "post",
               dataType:"json",//返回型別
               success: function(msg){
                   response(msg);//返回需要提示的內容
               }
           });
       }
     });   
以上都是一般使用。

 下面是本文的重點：

   function extendAutocomplete(){//這是一個擴充套件函式，繼承自ui.autocomplete
    $.widget('custom.multipeCln',$.ui.autocomplete,{
        _renderItem : function( ul, item ) {//這裡重寫autocomplete的_renderItem方法
            if(ul.html() == ""){
                var div = $('<div class="ui-widget-header" style="width:100%"></div>');
                var table = $('<table  style="width:100%" border=0></table>');
                var thead = $('<thead  style="width:100%"></thead>');
                var tr = $('<tr style="width:100%"></tr>');
                $.each(this.options.columns, function(index, item) {//這裡遍歷需要顯示列的標題
                    tr.append('<td style="padding:0 4px;float:left;width:' + item.width + 'px;">' + item.name + '</td>');
                });
                thead.append(tr);
                table.append(thead);
                div.append(table);
                ul.append(div);
            }
            var t = '';
             t =  '<span  style="width:100%">';
             t += '<table  style="width:100%" border=0>';
            t += '<tr style="width:100%">';
            
           $.each(this.options.columns, function(index, column) {//遍歷顯示的值
                t += '<td style="padding:0 4px;float:left;width:' + column.width + 'px;">' + item[column.name.toLowerCase()] + '</td>';
           });
           t += "</tr></table></span>";
            
            return $( "<li>" ).append( $( "<a  class='mcacAnchor'>" ).html( t ) ).appendTo( ul );
        }
    });
}

下面是使用這個擴充套件

$(function(){
    var data=[{'model':'1221','manufacturer':'HTML'},{'model':'1221','manufacturer':'HTML'},{'model':'3221','manufacturer':'HTML212'},{'model':'789221','manufacturer':'HTML343'}];
    extendAutocomplete();
    $('#auto').multipeCln({
        showHeader : true,
        columns : [{name : 'Model', width : 200},{name : 'Manufacturer', width : 200}],//設定顯示列的標題
        select: function(event, ui) {//這裡操作點選提示框中資料後，顯示到文字框中的樣式
    
            this.value = ui.item.model + (ui.item.manufacturer ? '/' + ui.item.manufacturer : '');
            return false;
        },
        source:function(request,response)
            {    
                response(data);
             }
    });
    });

顯示效果圖：

希望對大家有幫助，第一次寫文章，不足之處請大家多多提點。