[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 ...
随机推荐
- 团队开发——冲刺1.e
冲刺阶段一(第五天) 冲刺阶段一(第五天) 1.昨天做了什么?优化界面细节. 查看C#资料,再解决自己电脑的问题. 2.今天准备做什么? 为解决自己电脑的问题,查找关于C#的资料,后期做准备.
- ubuntu安装过程中的一些问题
安装了ubuntu后,用scp命令从另外一台电脑上复制文件过来,没有执行权限,查看执行文件的目录,文件所有者全部是root/root, 原来scp是sudo状态下操作的,所以复制过来的文件都属于roo ...
- Android刷新Dialog
在编写数独游戏时遇到一个问题,当我一次游戏成功后会弹出一个dialog,告诉玩家当前的游戏难度,积分和所用时间,我在onCreateDialog中setMessage之后发现内容一直是不变的,后来找到 ...
- Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition)
A.暴力枚举,注意游戏最长为90分钟 B.暴力,c[l]++,c[r]--,记录中间有多长的段是大小为n的,注意特判m=0的情况 C.暴力枚举,我居然一开始没想出来!我一直以为每次都要统计最大的,就要 ...
- lua 元表与元方法示例
-- 1.检查是否有元表local t = {1, 2}print(getmetatable(t)) -- nilprint("----------------------" ...
- CSS3实现轮播切换效果
实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作,大盒子固定大小,超出盒子范围进行隐藏,而里面无限个元素可以任何堆叠,按照一定的步骤进行位置变换,已达到在可视区域呈现我们想要的效果. 看 ...
- ASP.NET编程模型之ASP.NET页面生命周期图解
ASP.NET编程模型中ASP.NET页面生命周期是指什么呢?它包括什么呢?ASP.NET编程模型之ASP.NET页面生命周期具体的过程有哪些呢?下面就开始我们的讲解吧: ASP.NET 页运行时,此 ...
- LINUX系统编程 由REDIS的持久化机制联想到的子进程退出的相关问题
19:22:01 2014-08-27 引言: 以前对wait waitpid 以及exit这几个函数只是大致上了解,但是看REDIS的AOF和RDB 2种持久化时 均要处理子进程运行完成退出和父进程 ...
- 阿里 RocketMQ 安装与简介
一.简介 官方简介: l RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: l 能够保证严格的消息顺序 l 提供丰富的消息拉取模式 l 高效的订阅者水平扩展能力 l 实时的 ...
- [转]STL中vector转数组（实际是数组的指针）
感谢:http://topic.csdn.net/t/20050429/20/3976956.html 感谢:http://yzyanchao.blogbus.com/logs/47796444.ht ...