JQuery.autocomplete扩展功能：实现多列自动提示

最近做一个项目，用到了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);
             }
    });
    });

显示效果图：