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

顯示效果圖：

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

總結

以上是生活随笔為你收集整理的JQuery.autocomplete扩展功能：实现多列自动提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。