jquery.autocomplete.js 两种实现方法
<script type="text/javascript">
var v = 1;
var stockInfoJson = [
{ "name": "深发展A", "code": "000001", "spell": "sfza", "count":"32435" },
{ "name": "万科A", "code": "000002", "spell": "wka", "count":"231" },
{ "name": "ST 国 农", "code": "000004", "spell": "stgn", "count":"4567" },
{ "name": "世纪星源", "code": "000005", "spell": "sjxy", "count":"2345" },
{ "name": "深振业A", "code": "000006", "spell": "szya", "count":"8799" },
{ "name": "ST 达 声", "code": "000007", "spell": "stds", "count":"12345234" },
{ "name": "ST宝利来", "code": "000008", "spell": "stbll", "count":"56235" },
{ "name": "中国宝安", "code": "000009", "spell": "zgba", "count":"9833" },
{ "name": "S ST华新", "code": "000010", "spell": "ssthx", "count":"24878" },
{ "name": "山航B", "code": "200152", "spell": "shb", "count":"32435" },
{ "name": "*ST帝贤B", "code": "200160", "spell": "stdxb", "count":"32435" },
{ "name": "雷伊B", "code": "200168", "spell": "lyb", "count":"32435" },
{ "name": "宝石B", "code": "200413", "spell": "bsb", "count":"32435" },
{ "name": "小天鹅B", "code": "200418", "spell": "xteb", "count":"32435" },
{ "name": "粤高速B", "code": "200429", "spell": "agsb", "count":"32435" },
{ "name": "宁通信B", "code": "200468", "spell": "ltxb", "count":"32435" },
{ "name": "晨鸣B", "code": "200488", "spell": "cmb", "count":"32435" },
{ "name": "珠江B", "code": "200505", "spell": "zjb", "count":"32435" },
{ "name": "闽灿坤B", "code": "200512", "spell": "mskb", "count":"32435" },
{ "name": "华电国际", "code": "600027", "spell": "hdgj", "count":"32435" }
]; $(function () {
/*
$.ajax({
type: "POST",
contentType: "application/json",
url: "AjaxPage.aspx/GetAllHints",
data: "{}",
dataType: "json",
success: function (msg) {
var datas = eval('(' + msg.d + ')');
$("#keywords").autocomplete(
datas,
{
minChars: 1,
matchCase: false, //不区分大小写
autoFill: false,
max: 10,
formatItem: function (row, i, max) {
return "<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='left' height='24'><b>" + row.name + "</b></td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + row.count + "个宝贝</font> </td></tr></table>";
},
formatMatch: function (row, i, max) {
return row.name;
},
formatResult: function (row) {
return row.name;
},
reasultSearch: function (row, v)//本场数据自定义查询语法 注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if (row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0 || row.data.name.indexOf(v) == 0) {
return row;
}
else {
return false;
}
}
}).result(function (event, data, formatted) {
var encodeKeyword = encodeURIComponent(encodeURIComponent(data.name));
searchParams = "keyword=" + encodeKeyword;
window.location.href = "http://localhost/products.aspx?" + searchParams;
});
}
});
*/ $("#keywords").autocomplete(
"SearchHanle.ashx",
{
minChars: 1,
matchCase: false, //不区分大小写
autoFill: false,
max: 10,
parse: function (data) {
var d = eval("(" + data + ")"); //此处要用eval函数;
var rows = new Array();
for (var i = 0; i < d.length; i++) {
rows[rows.length] = {
data: d[i],
value: d[i].code,
result: d[i].name
}
}
return rows;
},
formatItem: function (row, i, max) {
return "<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='left' height='24'><b>" + row.name + "</b></td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + row.count + "个宝贝</font> </td></tr></table>";
},
formatMatch: function (row, i, max) {
return row.name;
},
formatResult: function (row) {
return row.name;
},
reasultSearch: function (row, v)//本场数据自定义查询语法 注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if (row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0 || row.data.name.indexOf(v) == 0) {
return row;
}
else {
return false;
}
}
}).result(function (event, data, formatted) {
var encodeKeyword = encodeURIComponent(encodeURIComponent(data.name));
searchParams = "keyword=" + encodeKeyword;
window.location.href = "http://localhost/products.aspx?" + searchParams;
});
});
</script>
先记一下,方法二是存在bug的。
jquery.autocomplete.js 两种实现方法的更多相关文章
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法
上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事前端工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知 ...
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- jQuery插件开发的两种方法及$.fn.extend的详解(转)
jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下 jQuery插件开发分为两种: 1 类级别 类级别你可以 ...
- JS中的两种刷新方法以及区别和适用范围
在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了. 所以我就想用js ...
- JS两种声明函数的方法以及调用顺序
两种声明方法: 1. var a = function () {...}; 2. function a() {...}; 第一种方式必须先声明后调用,而第二种方式函数调用在声明之前之后都可以. //第 ...
- Jquery autocomplete.js输入框联想补全功能
Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...
随机推荐
- Big Event in HDU[HDU1171]
Big Event in HDU Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- HDU 1026 (BFS搜索+优先队列+记录方案)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1026 题目大意:最短时间内出迷宫.迷宫里要杀怪,每个怪有一定HP,也就是说要耗一定时.输出方案. 解 ...
- android环境安装之android4.2安装(转)
准备学习android,着手安装android时听说很麻烦,在网上看了很多android安装说明,都是android比较早的版本,我这里安装了android4.2,简单记录一下. 安装分为几步,首先申 ...
- FFmpeg - 音频解码过程
1. 注册所有解码器 av_register_all(); 2. Codec & CodecContext AVCodec* codec = avcodec_find_decoder(CODE ...
- 【回文串-Manacher】
Manacher算法能够在O(N)的时间复杂度内得到一个字符串以任意位置为中心的回文子串.其算法的基本原理就是利用已知回文串的左半部分来推导右半部分. 转:http://blog.sina.com.c ...
- C++ 'dynamic_cast' and Java 'instanceof' 使用对比
在Java中,如果A是基类,B是A的派生类,那么instanceof可以用来判断一个实例对象是A还是B,相当于一个二元操作符,但与==, >, < 不同的是,它是由字母组成,是Java的保 ...
- java 面向对象--------时间作业
编写Java应用程序.首先,定义一个时钟类——Clock,它包括三个int型 成员变量分别表示时.分.秒,一个构造方法用于对三个成员变量(时.分.秒) 进行初始化,还有一个成员方法show()用于显示 ...
- CreateFeatureClass COM异常
private static IFeatureClass CreatStnShp(string shp) { //打开工作空间 IWorkspaceFactory wsfactory = new Sh ...
- sql语句清除mssql日志
DUMP TRANSACTION TestDB WITH NO_LOG 清除日志 DBCC SHRINKFILE ('TestDB_log',1) 收缩数据库文件 -----直接 ...
- 批量硬关联本地AD帐号与Office云端帐号
世纪互联给的方案, 说只能一个一个做硬匹配, 把我吓尿了. 我整个简单的, 还能批量做. 1. 将本地域中所有用户的这两个属性导出. Get-ADUser -Filter * -SearchBase ...