[Jquery] Jquery AutoComplete的使用方法实例
jQuery的Autocomplete（自动完成、自动填充）插件
jquery-autocomplete配置：
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
首先是一个最简单的Autocomplete（自动完成）代码片段：
1 <html xmlns="http://www.w3.org/1999/xhtml">2 <head runat="server">3 <title>AutoComplate</title>4 <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>5 <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>6 <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />7 <script type="text/javascript">8 $(function() {9 var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");10 11 $('#keyword').autocomplete(data).result(function(event, data, formatted) {12 alert(data);13 });14 });15 </script>16 </head>17 <body>18 <form id="form1" runat="server">19 <div>20 <input id="keyword" />21 <input id="getValue" value="GetValue" type="button" />22 </div>23 </form>24 </body>25 </html>
result方法是jQuery Autocomplete插件里的重要方法，它在用户在选定了某个条目时触发。data参数为选中的数据。
一个稍微复杂的例子，可以自定义提示列表:
1 <html xmlns="http://www.w3.org/1999/xhtml">2 <head runat="server">3 <title>自定义提示</title>4 <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>5 <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>6 <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />7 <script type="text/javascript">8 var emails = [9 { name: "Peter Pan", to: "peter@pan.de" },10 { name: "Molly", to: "molly@yahoo.com" },11 { name: "Forneria Marconi", to: "live@japan.jp" },12 { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },13 { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },14 { name: "Don Corleone", to: "don@vegas.com" },15 { name: "Mc Chick", to: "info@donalds.org" },16 { name: "Donnie Darko", to: "dd@timeshift.info" },17 { name: "Quake The Net", to: "webmaster@quakenet.org" },18 { name: "Dr. Write", to: "write@writable.com" },19 { name: "GG Bond", to: "Bond@qq.com" },20 { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }21 ];22 23 $(function() {24 $('#keyword').autocomplete(emails, {25 max: 12, //列表里的条目数26 minChars: 0, //自动完成激活之前填入的最小字符27 width: 400, //提示的宽度，溢出隐藏28 scrollHeight: 300, //提示的高度，溢出显示滚动条29 matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示30 autoFill: false, //自动填充31 formatItem: function(row, i, max) {32 return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';33 },34 formatMatch: function(row, i, max) {35 return row.name + row.to;36 },37 formatResult: function(row) {38 return row.to;39 }40 }).result(function(event, row, formatted) {41 alert(row.to);42 });43 });44 </script>45 </head>46 <body>47 <form id="form1" runat="server">48 <div>49 <input id="keyword" />50 <input id="getValue" value="GetValue" type="button" />51 </div>52 </form>53 </body>54 </html>
formatItem、formatMatch、formatResult是自定提示信息的关键。
formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体。
formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，
formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。
下载地址：jquery.autocomplete示例代码.rar
----------------------------------------------------------------------------------------------------------------
其他：
public class EmailObj { public string name { get; set; } public string to { get; set; } }
//action方法：
public ActionResult get(string q) { var emails = new List<EmailObj>(){ new EmailObj(){ name = "Peter Pan", to= "peter@pan.de" }, new EmailObj(){ name= "Molly", to= "molly@yahoo.com" }, new EmailObj(){ name= "Forneria Marconi", to= "live@japan.jp" }, new EmailObj(){ name= "Master Sync", to= "205bw@samsung.com" }, new EmailObj(){ name= "Dr. Tech de Log", to= "g15@logitech.com" }, new EmailObj(){ name= "Don Corleone", to= "don@vegas.com" }, new EmailObj(){ name= "Mc Chick", to= "info@donalds.org" }, new EmailObj(){ name= "Donnie Darko", to= "dd@timeshift.info" }, new EmailObj(){ name= "Quake The Net", to= "webmaster@quakenet.org" }, new EmailObj(){ name= "Dr. Write", to= "write@writable.com" }, new EmailObj(){ name= "GG Bond", to= "Bond@qq.com" }, new EmailObj(){ name= "Zhuzhu Xia", to= "zhuzhu@qq.com" } }; emails = emails.Where(c => c.to.ToLower().Contains(q.ToLower().TrimEnd())).ToList(); var res = JsonConvert.SerializeObject(emails); res = res.Replace("},", "}\n").TrimStart('[').TrimEnd(']'); return Json(res, JsonRequestBehavior.AllowGet); }
//前台js代码：
@{ Layout = null;
}
<!DOCTYPE html>
<html>
<head> <script src="~/Scripts/autocomplete/jquery.js"></script> <link href="~/Scripts/autocomplete/jquery.autocomplete.css" rel="stylesheet" /> <script src="~/Scripts/autocomplete/jquery.autocomplete.js"></script> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> var emails = [ { name: "Peter Pan", to: "peter@pan.de" }, { name: "Molly", to: "molly@yahoo.com" }, { name: "Forneria Marconi", to: "live@japan.jp" }, { name: "Master <em>Sync</em>", to: "205bw@samsung.com" }, { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" }, { name: "Don Corleone", to: "don@vegas.com" }, { name: "Mc Chick", to: "info@donalds.org" }, { name: "Donnie Darko", to: "dd@timeshift.info" }, { name: "Quake The Net", to: "webmaster@quakenet.org" }, { name: "Dr. Write", to: "write@writable.com" }, { name: "GG Bond", to: "Bond@qq.com" }, { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" } ]; $(function () { $('#keyword').autocomplete("/A/get", { dataType: "json", max: 12, //列表里的条目数 minChars: 0, //自动完成激活之前填入的最小字符 width: 400, //提示的宽度，溢出隐藏 scrollHeight: 300, //提示的高度，溢出显示滚动条 matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示 autoFill: false, //自动填充 cacheLength: 0, formatItem: function (row, i, max) { row = JSON.parse(row); return i + '/' + max + ':"' + row.name + '"[' + row.to + ']'; }, formatMatch: function (row, i, max) { row = JSON.parse(row); return row.name + row.to; }, formatResult: function (row) { row = JSON.parse(row); return row.to; } }).result(function (event, row, formatted) { row = JSON.parse(row);
alert(row.to); }); }); </script>
</head>
<body> <div> inputs: <input id="keyword" /> </div> </body>
</html>
下载地址：Code_AutoComplete.rar
[Jquery] Jquery AutoComplete的使用方法实例的更多相关文章
- Jquery AutoComplete的使用方法实例
jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项 ...
- jQuery plugin: Autocomplete 参数及实例
官网:jQuery plugin: Autocomplete (注:此插件已经不再更新.它的继任者是jQuery UI的一部分,) 此插件依赖于 jquery 1.2.6 --- j ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- jQuery通用的全局遍历方法$.each()用法实例
1.jQuery通用的全局遍历方法$.each()用法 2. test.json文件代码: 3. html代码 4.jQuery代码 <script src="jquery-1.3.1 ...
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
- JS常用方法总结，及jquery异步调用后台方法实例
//前台接收get参数值 function getQueryString(name) { var queryStrings = window.location.search.sp ...
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- JQuery中each()的使用方法说明
JQuery中each()的使用方法说明 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的eac ...
随机推荐
- Day9 summary
昨天又翻出收藏夹里一个叫“谷子粒”的bloghttp://1.guzili.sinaapp.com/?p=128#more-128,链接是博主整理的机器学习方面的热点微博,相当的干货.要说我是从知乎对 ...
- iOS Xcodebuild
简介 xcodebuild 是苹果发布自动构建的工具.它在一个Xcode项目下能构建一个或者多个targets ,也能在一个workspace或者Xcode项目上构建scheme,总的来说,用它没错就 ...
- [GodLove]Wine93 Tarining Round #1
比赛链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=44664#overview 题目来源: 2011 Asia Regional ...
- Eos持久化实体
持久化实体 2009-11-30 20:53:38| 分类: 记事本_学习笔记 | 标签: |举报 |字号大中小 订阅 在EOS的实体定义中,如果使用了关联实体方式,主实体的外键属性是不存 ...
- Linux 2>&1理解(转)
2>&1使用一 相关知识1)默认地,标准的输入为键盘,但是也可以来自文件或管道(pipe |).2)默认地,标准的输出为终端(terminal),但是也可以重定向到文件,管道或后引号(b ...
- PAT (Basic Level) Practise：1026. 程序运行时间
[题目链接] 要获得一个C语言程序的运行时间,常用的方法是调用头文件time.h,其中提供了clock()函数,可以捕捉从程序开始运行到clock()被调用时所耗费的时间.这个时间单位是clock t ...
- BlackJack Strategy
GAME SPEC: 2-deck, 104 cards total. Bellagio has 2-deck and 6-deck games. based on hard 17, dealer h ...
- 利用pip8.1.2 安装django1.9.7
把python2升级到python3之后,利用pip安装django1.9.7时报错: DistributionNotFound: The 'pip==7.1.0' distribution was ...
- Tomcat 安装--小白教程
因为要进行微信公众号的开发模式,所以需要安装Tomcat Web服务器,现在就把我的安装过程写下来,希望可以帮到有需要的人~首先,我们需要下载tomcat的安装包,直接去官网就好啦,http://to ...
- Linux命令--系统中常用的查看命令
摘自 http://my.oschina.net/syyzhan/blog/277536 1.查看日志文件 使用命令:cat 或者 tail -f(默认查看文件尾部10行) 相关日志文件: /var/ ...