這二天開(kāi)始用jquery.autocomplete這個(gè)自動(dòng)完成插件。功能基本比較強(qiáng)大，但自己在實(shí)際需求中發(fā)現(xiàn)還是有一處不足！
問(wèn)題是這樣：當(dāng)我定義了一個(gè)本地?cái)?shù)據(jù)JS文件時(shí)，格式為JSON式的數(shù)組。如下：
var?stockInfoJson?=?[
????{?name:?"深發(fā)展A",?code:?"000001",spell:"sfza"?},
????{?name:?"萬(wàn)科A",?code:?"000002",spell:"wka"},
????{?name:?"ST?國(guó)?農(nóng)",?code:?"000004",spell:"stgn"?},
????{?name:?"世紀(jì)星源",?code:?"000005",spell:"sjxy"?},
????{?name:?"深振業(yè)A",?code:?"000006"?,spell:"szya"},
????{?name:?"ST?達(dá)?聲",?code:?"000007"?,spell:"stds"},
????{?name:?"ST寶利來(lái)",?code:?"000008"?,spell:"stbll"},
????{?name:?"中國(guó)寶安",?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:?"華電國(guó)際",?code:?"600027"?,spell:"hdgj"}
];
現(xiàn)在希望用戶輸入的內(nèi)容在code及spell屬性中進(jìn)行匹配。但默認(rèn)的jquery.autocomplete.js插件，當(dāng)用戶輸入內(nèi)容時(shí)總是去匹配name.
通過(guò)查看源碼沒(méi)有發(fā)現(xiàn)有對(duì)此需求進(jìn)行支持的相關(guān)屬性，這點(diǎn)倒不方便了！所以決定對(duì)jquery.autocomplete.js進(jìn)行修改，使其支持自定義的匹配模式。
首先在429行添加一個(gè)事件 reasultSearch:null,//?add?by?fengyan?添加一個(gè)自定義查詢結(jié)果的事件屬性
在$.Autocompleter.Cache中添加一個(gè)緩存數(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行添加一個(gè)判斷 //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;????????????
}

然后前臺(tái)調(diào)用的時(shí)候可以使用resultSearch屬性進(jìn)行擴(kuò)展我們自己想要的查詢方式 $(function(){
????$("#suggest1").autocomplete(stockInfoJson,?{
????????minChars:?1,
????????matchCase:false,//不區(qū)分大小寫(xiě)
????????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)//本場(chǎng)數(shù)據(jù)自定義查詢語(yǔ)法?注意這是我自己新加的事件
????????{
????????????//自定義在code或spell中匹配
????????????if(row.data.code.indexOf(v)?==?0?||?row.data.spell.indexOf(v)?==?0)
????????????{
????????????????return?row;
????????????}
????????????else
????????????????return?false;????????????
????????}
????});
});到些通過(guò)修改源文件達(dá)到滿足需求的目的了！


運(yùn)行效果如圖

擴(kuò)展方法本文已作詳細(xì)說(shuō)明
如有需要的源碼的朋友可以訪問(wèn)
源碼下載：下載代碼? download local

總結(jié)

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

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