这二天开始用jquery.autocomplete这个自动完成插件。功能基本比较强大,但自己在实际需求中发现还是有一处不足!
问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组。如下:

var stockInfoJson = [
    { 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行添加一个事件

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: 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 插件的自定义搜索规则相关推荐

  1. jquery.validate.js插件的使用方法

    近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...

  2. IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题

    IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题 参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...

  3. 页面打印插件 jquery.jqprint.js 插件使用实例

    页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...

  4. table2excel 导出文字不居中的问题 附 jquery.table2excel.js 插件

    正常js部分代码如下 ,很简单 $("#exportBtn").on("click",function(){$("#yearTable"). ...

  5. JQuery Easing.js插件

    jQuery Easing.js 插件 介绍:easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果. 环境:因为easing是jQuery的插件,所以必须是在引入jquery之后再引 ...

  6. 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO

    1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...

  7. 利用Jquery Lazyload JS插件实现网页图片延迟加载

    Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...

  8. 关于jquery.flexslider-min.js插件

    Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数 ...

  9. jquery.fileupload.js插件使用--单视频或音频上传预览

    一.前台代码: <!DOCTYPE html> <html> <head><title>jquery.fileupload.js使用测试</tit ...

最新文章

  1. RedHat 7.0及CentOS 7.0禁止Ping的三种方法
  2. 【 Vivado 】在工程模式下通过jou文件来学习 Tcl 命令
  3. 想知道数据表的用户或系统异动时间
  4. vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案...
  5. 把事务封装成类似Serializable用法的特性
  6. Android 智能问答机器人的实现
  7. svn 分支上新增文件合并发生冲突_SVN的使用、分支合并及解决冲突详解
  8. 任务03——简单程序测试及 GitHub Issues 的使用
  9. [css] rem是如何实现自适应布局的?
  10. pycharm无法导入本地模块问题
  11. Java 线程实例一(查看线程是否存活、获取当前线程名称、状态监测、线程优先级设置、死锁及解决方法、获取线程id、线程挂起)
  12. 深入浅出强化学习_皋兰县举办科级干部学习贯彻党的十九届五中全会精神培训班...
  13. mysql删除中继日志_mysql 中继日志删除可以自动获取吗
  14. 任达华遇袭是效仿“宏颜获水”事件?百度回应:严惩肇事者 以儆效尤
  15. 24有几种封装尺寸_mmWave设备的封装应该如何处理
  16. 基于麻雀算法改进的随机森林分类算法 - 附代码
  17. 拖放drag、drog
  18. Ubuntu窗口过大?按钮都点不到怎么办?
  19. APICloud教程
  20. PyScripter显示行号

热门文章

  1. Maven安装与配置详解(Win10)
  2. Android Studio安装踩坑
  3. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何获取标准驱动器扭矩值获取电流值
  4. c# winform InvokeRequired 解决跨线程访问控件
  5. 2.select_基础运用
  6. Entity Framework的事务提交
  7. 【UWB】数学建模 E 题目个人解题答案 - 2021年第十八届华为杯
  8. 【数理知识】第8章-图-《离散数学及其应用》Kenneth H. Rosen
  9. 第三章 线性代数回顾-机器学习老师板书-斯坦福吴恩达教授
  10. ATPG Practice ATPG Practice II