jquery.autocomplete.js 插件的自定义搜索规则
问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组。如下:
{ 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: "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"}
];
现在希望用户输入的内容在code及spell属性中进行匹配。但默认的jquery.autocomplete.js插件,当用户输入内容时总是去匹配name.
通过查看源码没有发现有对此需求进行支持的相关属性,这点倒不方便了!所以决定对jquery.autocomplete.js进行修改,使其支持自定义的匹配模式。
首先在429行添加一个事件
在$.Autocompleter.Cache中添加一个缓存数据变量450行
在populate()方法中添加511行添加
然后再在load: function(q)方法中568行添加一个判断
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属性进行扩展我们自己想要的查询方式
$("#suggest1").autocomplete(stockInfoJson, {
minChars: 1,
matchCase:false,//不区分大小写
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)//本场数据自定义查询语法 注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if(row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0)
{
return row;
}
else
return false;
}
});
});
到些通过修改源文件达到满足需求的目的了!
运行效果如图
扩展方法本文已作详细说明
如有需要的源码的朋友可以访问
源码下载:下载代码 download local
jquery.autocomplete.js 插件的自定义搜索规则相关推荐
- jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
- IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题 参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...
- 页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...
- table2excel 导出文字不居中的问题 附 jquery.table2excel.js 插件
正常js部分代码如下 ,很简单 $("#exportBtn").on("click",function(){$("#yearTable"). ...
- JQuery Easing.js插件
jQuery Easing.js 插件 介绍:easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果. 环境:因为easing是jQuery的插件,所以必须是在引入jquery之后再引 ...
- 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO
1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
- 关于jquery.flexslider-min.js插件
Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数 ...
- jquery.fileupload.js插件使用--单视频或音频上传预览
一.前台代码: <!DOCTYPE html> <html> <head><title>jquery.fileupload.js使用测试</tit ...
最新文章
- RedHat 7.0及CentOS 7.0禁止Ping的三种方法
- 【 Vivado 】在工程模式下通过jou文件来学习 Tcl 命令
- 想知道数据表的用户或系统异动时间
- vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案...
- 把事务封装成类似Serializable用法的特性
- Android 智能问答机器人的实现
- svn 分支上新增文件合并发生冲突_SVN的使用、分支合并及解决冲突详解
- 任务03——简单程序测试及 GitHub Issues 的使用
- [css] rem是如何实现自适应布局的?
- pycharm无法导入本地模块问题
- Java 线程实例一(查看线程是否存活、获取当前线程名称、状态监测、线程优先级设置、死锁及解决方法、获取线程id、线程挂起)
- 深入浅出强化学习_皋兰县举办科级干部学习贯彻党的十九届五中全会精神培训班...
- mysql删除中继日志_mysql 中继日志删除可以自动获取吗
- 任达华遇袭是效仿“宏颜获水”事件?百度回应:严惩肇事者 以儆效尤
- 24有几种封装尺寸_mmWave设备的封装应该如何处理
- 基于麻雀算法改进的随机森林分类算法 - 附代码
- 拖放drag、drog
- Ubuntu窗口过大?按钮都点不到怎么办?
- APICloud教程
- PyScripter显示行号
热门文章
- Maven安装与配置详解(Win10)
- Android Studio安装踩坑
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何获取标准驱动器扭矩值获取电流值
- c# winform InvokeRequired 解决跨线程访问控件
- 2.select_基础运用
- Entity Framework的事务提交
- 【UWB】数学建模 E 题目个人解题答案 - 2021年第十八届华为杯
- 【数理知识】第8章-图-《离散数学及其应用》Kenneth H. Rosen
- 第三章 线性代数回顾-机器学习老师板书-斯坦福吴恩达教授
- ATPG Practice ATPG Practice II