这二天开始用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 插件的自定义搜索规则的更多相关文章

  1. Jquery autocomplete.js输入框联想补全功能

    Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...

  2. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  3. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  4. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  5. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  6. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  7. 异步上传图片,光用jquery不行,得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  8. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  9. ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)

    就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...

随机推荐

  1. Beat the Spread![HDU1194]

    Beat the Spread! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. xubuntu12.04配置

    更改源:我用上海交通大学的 首先备份Ubuntu12.04源列表sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup   #(备份下当前 ...

  3. 【BZOJ】1269: [AHOI2006]文本编辑器editor(Splay)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1269 这题RE2次啊,好不爽啊,我一直以为是splay的问题,其实是数组开小了......(我老犯这 ...

  4. CentOS 下实现两台服务器之间的共享NFS

    NFS的安装配置:centos 5 :yum install nfs-utils portmapcentos 6 :yum install nfs-utils rpcbind yum install ...

  5. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  6. XSS的高级利用部分总结 -蠕虫

    XSS的高级利用部分总结 -蠕虫,HTTP-only,AJAX本地文件操作,镜象网页本帖最后由 racle 于 2009-5-30 09:19 编辑 XSS的高级利用总结 -蠕虫,HTTPONLY,A ...

  7. Phaser中很多对象都有一个anchor属性

    游戏要用到的一些图片.声音等资源都需要提前加载,有时候如果资源很多,就有必要做一个资源加载进度的页面,提高用户等待的耐心.这里我们用一个state来实现它,命名为preload. 因为资源加载进度条需 ...

  8. 通过ReflectionMethod,我们可以得到Person类的某个方法的信息

    PHP反射api由若干类组成,可帮助我们用来访问程序的元数据或者同相关的注释交互.借助反射我们可以获取诸如类实现了那些方法,创建一个类的实例(不同于用new创建),调用一个方法(也不同于常规调用),传 ...

  9. obout editor Absolute path for uploaded image

    本文转自:https://www.obout.com/editor_new/KnowledgeBase.aspx?id=706   Absolute path for uploaded image Q ...

  10. HDU 2795 Billboard(线段树的另类应用)

    Billboard Time Limit: 20000/8000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...