jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件。功能基本比较强大,但自己在实际需求中发现还是有一处不足!
问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组。如下:
var stockInfoJson = [
{ name: "深发展A", code: "",spell:"sfza" },
{ name: "万科A", code: "",spell:"wka"},
{ name: "ST 国 农", code: "",spell:"stgn" },
{ name: "世纪星源", code: "",spell:"sjxy" },
{ name: "深振业A", code: "" ,spell:"szya"},
{ name: "ST 达 声", code: "" ,spell:"stds"},
{ name: "ST宝利来", code: "" ,spell:"stbll"},
{ name: "中国宝安", code: "" ,spell:"zgba"},
{ name: "S ST华新", code: "" ,spell:"ssthx"},
{ name: "山航B", code: "" ,spell:"shb"},
{ name: "*ST帝贤B", code: "" ,spell:"stdxb"},
{ name: "雷伊B", code: "" ,spell:"lyb"},
{ name: "宝石B", code: "",spell:"bsb" },
{ name: "小天鹅B", code: "" ,spell:"xteb"},
{ name: "粤高速B", code: "" ,spell:"agsb"},
{ name: "宁通信B", code: "" ,spell:"ltxb"},
{ name: "晨鸣B", code: "" ,spell:"cmb"},
{ name: "珠江B", code: "" ,spell:"zjb"},
{ name: "闽灿坤B", code: "" ,spell:"mskb"},
{ name: "华电国际", code: "" ,spell:"hdgj"}
];
现在希望用户输入的内容在code及spell属性中进行匹配。但默认的jquery.autocomplete.js插件,当用户输入内容时总是去匹配name.
通过查看源码没有发现有对此需求进行支持的相关属性,这点倒不方便了!所以决定对jquery.autocomplete.js进行修改,使其支持自定义的匹配模式。
首先在429行添加一个事件
reasultSearch:null,// add by fengyan 添加一个自定义查询结果的事件属性
在$.Autocompleter.Cache中添加一个缓存数据变量450行
var allData = new Array();// add by fengyan 数组变量 缓存所有数据
在populate()方法中添加511行添加
allData.push(row);//add by fengyan 将每行数据存放刚才定义的数组变量中
然后再在load: function(q)方法中568行添加一个判断
//add by fengyan 调用用户自定义查询方法
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;
}
然后前台调用的时候可以使用resultSearch属性进行扩展我们自己想要的查询方式
$(function(){
$("#suggest1").autocomplete(stockInfoJson, {
minChars: ,
matchCase:false,//不区分大小写
autoFill: false,
max: ,
formatItem: function(row, i, max,term) {
var v = $("#suggest1").val();
return row.name + " (" + row.code + ")";
if(row.code.indexOf(v) == || row.spell.indexOf(v)==)
{
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)//本场数据自定义查询语法 注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if(row.data.code.indexOf(v) == || row.data.spell.indexOf(v) == )
{
return row;
}
else
return false;
}
});
});
到些通过修改源文件达到满足需求的目的了! 

运行效果如图
扩展方法本文已作详细说明
如有需要的源码的朋友可以访问
源码下载:下载代码 download local
jquery.autocomplete.js 插件的自定义搜索规则的更多相关文章
- Jquery autocomplete.js输入框联想补全功能
Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...
- JQuery UI Autocomplete与jquery.autocomplete.js
程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- jQuery.cookie.js插件了解及使用方法
jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...
- 异步上传图片,光用jquery不行,得用jquery.form.js插件
异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)
就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...
随机推荐
- 转盘游戏[XDU1006]
Problem 1006 - 转盘游戏 Time Limit: 1000MS Memory Limit: 65536KB Difficulty: Total Submit: 87 Accep ...
- extjs 选项卡
yufenghou extjs 选项卡 <%@ page language="java" import="java.util.*" pageEncodin ...
- BZOJ3679 : 数字之积
设f[i][p2][p3][p5][p7][j][k]表示前i位,2,3,5,7的次数,前i位是否等于x,是否有数字的方案数 然后数位DP即可,ans=cal(r)-cal(l) #include&l ...
- linux安装apache的纠结过程
本以为linux下安装apache是件很简单的过程.三命令就可以搞定,jxvf解压,make 编译,make install 安装就OK了.没想到这个过程还颇费周折.可能和环境有关吧.先说一下我的环境 ...
- 【BZOJ】1601: [Usaco2008 Oct]灌水(kruskal)
http://www.lydsy.com/JudgeOnline/problem.php?id=1601 很水的题,但是一开始我看成最短路了T_T 果断错. 我们想,要求连通,对,连通!连通的价值最小 ...
- 51NOD 算法马拉松12
OTZ做出题目的神犇..断断续续改完了在这里存一下思路吧 A题:第K大区间题意:定义一个区间的值为其众数出现的次数.现给出n个数,求将所有区间的值排序后,第K大的值为多少. 分析:二分答案mid,任务 ...
- iOS开发中代理使用出现的问题解决
在给自定义的LHQTabBar设置代理的时候,定义的代理的属性的时候此时会报一个警告 我们需要遵守UITabBarDelegate的协议才行, 不过此时还有警告,警告已经变成了 此时我们需要在.m文件 ...
- Cite a Website in Paper 论文中引用网页的格式
Template: 1.A. Author Surname, 'Title', Year Published, <http://Website-Url> (accessed 10 Octo ...
- FileStorage Read String Start With Number Need Quotation Mark 读取数字开头的字符串需要加引号
// Write data FileStorage fs("test.yml", FileStorage::WRITE); fs << "MyString&q ...
- Solve error LNK2038: mismatch detected for '_ITERATOR_DEBUG_LEVEL': value '0' doesn't match value '2'
This error happens in Release mode of VS2010, solve this problem by do following: . Go to Project Pa ...