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

}

});

});

显示效果图：


希望对大家有帮助，第一次写文章，不足之处请大家多多提点。