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 有两种用法,一种是直接使 ...
随机推荐
- 小明A+B[HDU2096]
小明A+B Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- unity 播放过场动画
public var url="file:///c:/sample.ogg"; //文件路径 function Start () { //拼凑一个url url="fil ...
- CentOS6.4 配置DNS服务器
1.安装bind yum install -y bind bind-chroot bind-utis 2.配置named.conf [root@dns /]# vi /etc/named.conf 注 ...
- [Unity2D]Box Collider 2D盒子碰撞器
盒子碰撞器(BoxCollider2D)是Unity2D中常用的碰撞器,所有为碰撞器,顾名思义,就是用于检测物体之间的碰撞情况的,Unity2D里面除了BoxCollider2D碰撞器之外还集成Box ...
- 【BZOJ】1097: [POI2007]旅游景点atr(spfa+状压dp)
http://www.lydsy.com/JudgeOnline/problem.php?id=1097 首先还是我很sb....想到了分层图想不到怎么串起来,,,以为用拓扑序搞转移,,后来感到不行. ...
- Graph database_neo4j 底层存储结构分析(5)
3.5 Property 的存储 下面是neo4j graph db 中,Property数据存储对应的文件: neostore.propertystore.db neostore.propertys ...
- POST模拟百度登录和自动发帖
这里用HttpClient发包模拟百度登录和发帖,验证码部分采用机器下载人工识别. 登陆百度的原理:1. 访问https://passport.baidu.com/v2/api/?getapi& ...
- 命令行安装KVM
查看libvirtd的状态: [root@super67 ~]# /etc/init.d/libvirtd status libvirtd (pid 2503) is running... 安装vn ...
- Delphi 复习代码
1.取得可文件路径 Path := ExtractFilePath(Application.ExeName); //取得可执行文件路径 TXMLDocument.Create(ExtractFileP ...
- android之打开网页
首先改写strings.xml文件 代码如下: <resources> <string name="app_name">Intent应用</strin ...