这二天开始用jquery.autocomplete这个自动完成插件。功能基本比较强大，但自己在实际需求中发现还是有一处不足！
问题是这样：当我定义了一个本地数据JS文件时，格式为JSON式的数组。如下：
varstockInfoJson=[
{name:"深发展A",code:"000001",spell:"sfza"},
{name:"万科A",code:"000002",spell:"wka"},
{name:"ST国农",code:"000004",spell:"stgn"},
{name:"世纪星源",code:"000005",spell:"sjxy"},
{name:"深振业A",code:"000006",spell:"szya"},
{name:"ST达声",code:"000007",spell:"stds"},
{name:"ST宝利来",code:"000008",spell:"stbll"},
{name:"中国宝安",code:"000009",spell:"zgba"},
{name:"SST华新",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:"13",spell:"bsb"},
{name:"小天鹅B",code:"18",spell:"xteb"},
{name:"粤高速B",code:"29",spell:"agsb"},
{name:"宁通信B",code:"68",spell:"ltxb"},
{name:"晨鸣B",code:"88",spell:"cmb"},
{name:"珠江B",code:"05",spell:"zjb"},
{name:"闽灿坤B",code:"12",spell:"mskb"},
{name:"华电国际",code:"600027",spell:"hdgj"}
];
现在希望用户输入的内容在code及spell属性中进行匹配。但默认的jquery.autocomplete.js插件，当用户输入内容时总是去匹配name.
通过查看源码没有发现有对此需求进行支持的相关属性，这点倒不方便了！所以决定对jquery.autocomplete.js进行修改，使其支持自定义的匹配模式。
首先在429行添加一个事件 reasultSearch:null,//addbyfengyan添加一个自定义查询结果的事件属性
在$.Autocompleter.Cache中添加一个缓存数据变量450行 varallData=newArray();//addbyfengyan数组变量缓存所有数据
在populate()方法中添加511行添加 allData.push(row);//addbyfengyan将每行数据存放刚才定义的数组变量中
然后再在load: function(q)方法中568行添加一个判断 //addbyfengyan调用用户自定义查询方法
elseif(typeof(options.reasultSearch)=="function")
{
varcsub=[];
$.each(allData,function(i,row){
varms=options.reasultSearch(row,q);
if(ms!=null&&ms!=false)
{
csub.push(ms);
}
});
returncsub;
}
然后前台调用的时候可以使用resultSearch属性进行扩展我们自己想要的查询方式 $(function(){
$("#suggest1").autocomplete(stockInfoJson,{
minChars:1,
matchCase:false,//不区分大小写
autoFill:false,
max:10,
formatItem:function(row,i,max,term){
varv=$("#suggest1").val();
returnrow.name+"("+row.code+")";
if(row.code.indexOf(v)==0||row.spell.indexOf(v)==0)
{
returnrow.name+"("+row.code+")";
}
else
returnfalse;
},
formatMatch:function(row,i,max){
returnrow.name+"("+row.code+")";
},
formatResult:function(row){
returnrow.code;
},
reasultSearch:function(row,v)//本场数据自定义查询语法注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if(row.data.code.indexOf(v)==0||row.data.spell.indexOf(v)==0)
{
returnrow;
}
else
returnfalse;
}
});
});到些通过修改源文件达到满足需求的目的了！
运行效果如图
扩展方法本文已作详细说明
如有需要的源码的朋友可以访问
源码下载：下载代码 download local
如果觉得《jquery.autocomplete.js 插件的自定义搜索规则》对你有帮助，请点赞、收藏，并留下你的观点哦！
