這二天開始用jquery.autocomplete這個自動完成插件。功能基本比較強大，但自己在實際需求中發(fā)現(xiàn)還是有一處不足！
問題是這樣：當我定義了一個本地數(shù)據(jù)JS文件時，格式為JSON式的數(shù)組。如下：
var?stockInfoJson?=?[
????{?name:?"深發(fā)展A",?code:?"000001",spell:"sfza"?},
????{?name:?"萬科A",?code:?"000002",spell:"wka"},
????{?name:?"ST?國?農(nóng)",?code:?"000004",spell:"stgn"?},
????{?name:?"世紀星源",?code:?"000005",spell:"sjxy"?},
????{?name:?"深振業(yè)A",?code:?"000006"?,spell:"szya"},
????{?name:?"ST?達?聲",?code:?"000007"?,spell:"stds"},
????{?name:?"ST寶利來",?code:?"000008"?,spell:"stbll"},
????{?name:?"中國寶安",?code:?"000009"?,spell:"zgba"},
????{?name:?"S?ST華新",?code:?"000010"?,spell:"ssthx"},
????{?name:?"山航B",?code:?"200152"?,spell:"shb"},
????{?name:?"*ST帝賢B",?code:?"200160"?,spell:"stdxb"},
????{?name:?"雷伊B",?code:?"200168"?,spell:"lyb"},
????{?name:?"寶石B",?code:?"200413",spell:"bsb"?},
????{?name:?"小天鵝B",?code:?"200418"?,spell:"xteb"},
????{?name:?"粵高速B",?code:?"200429"?,spell:"agsb"},
????{?name:?"寧通信B",?code:?"200468"?,spell:"ltxb"},
????{?name:?"晨鳴B",?code:?"200488"?,spell:"cmb"},
????{?name:?"珠江B",?code:?"200505"?,spell:"zjb"},
????{?name:?"閩燦坤B",?code:?"200512"?,spell:"mskb"},
????{?name:?"華電國際",?code:?"600027"?,spell:"hdgj"}
];
現(xiàn)在希望用戶輸入的內(nèi)容在code及spell屬性中進行匹配。但默認的jquery.autocomplete.js插件，當用戶輸入內(nèi)容時總是去匹配name.
通過查看源碼沒有發(fā)現(xiàn)有對此需求進行支持的相關屬性，這點倒不方便了！所以決定對jquery.autocomplete.js進行修改，使其支持自定義的匹配模式。
首先在429行添加一個事件 reasultSearch:null,//?add?by?fengyan?添加一個自定義查詢結(jié)果的事件屬性
在$.Autocompleter.Cache中添加一個緩存數(shù)據(jù)變量450行 var?allData?=?new?Array();//?add?by?fengyan?數(shù)組變量?緩存所有數(shù)據(jù)
在populate()方法中添加511行添加 allData.push(row);//add?by?fengyan?將每行數(shù)據(jù)存放剛才定義的數(shù)組變量中
然后再在load: function(q)方法中568行添加一個判斷 //add?by?fengyan?調(diào)用用戶自定義查詢方法
else?if(typeof(options.reasultSearch)=="function")
{
????var?csub?=?[];
????$.each(allData,?function(i,?row)?{
????????var?ms?=?options.reasultSearch(row,q);
????????if(ms!=null?&&?ms!=false)
????????{
????????????csub.push(ms);
????????}
????});
????return?csub;????????????
}

然后前臺調(diào)用的時候可以使用resultSearch屬性進行擴展我們自己想要的查詢方式 $(function(){
????$("#suggest1").autocomplete(stockInfoJson,?{
????????minChars:?1,
????????matchCase:false,//不區(qū)分大小寫
????????autoFill:?false,
????????max:?10,
????????formatItem:?function(row,?i,?max,term)?{
????????????var?v?=?$("#suggest1").val();????????
????????????return??row.name?+?"?("?+?row.code?+?")";
????????????if(row.code.indexOf(v)?==?0?||?row.spell.indexOf(v)==0)
????????????{
????????????????return??row.name?+?"?("?+?row.code?+?")";
????????????}
????????????else
????????????????return?false;
????????},
????????formatMatch:?function(row,?i,?max)?{
????????????return?row.name?+?"?("?+?row.code+")";
????????},
????????formatResult:?function(row)?{
????????????return?row.code;
????????},
????????reasultSearch:function(row,v)//本場數(shù)據(jù)自定義查詢語法?注意這是我自己新加的事件
????????{
????????????//自定義在code或spell中匹配
????????????if(row.data.code.indexOf(v)?==?0?||?row.data.spell.indexOf(v)?==?0)
????????????{
????????????????return?row;
????????????}
????????????else
????????????????return?false;????????????
????????}
????});
});到些通過修改源文件達到滿足需求的目的了！


運行效果如圖

擴展方法本文已作詳細說明
如有需要的源碼的朋友可以訪問
源碼下載：下載代碼? download local

總結(jié)

以上是生活随笔為你收集整理的jquery.autocomplete.js 插件的自定义搜索规则的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。