[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 ...
随机推荐
- eclipse working sets 视图 解决Other Projects不见问题
请移步: http://note.youdao.com/yws/public/redirect/share?id=d54cac4232078f9acab551d62337a2d1&type=f ...
- “cv”: 具有该名称的命名空间不存在
记得添加#include<highgui.h> 无法解析的外部符号 遇到这种问题一般都是由于缺少相应的库文件 右击项目,选择“属性”--“链接器”--“输入”--“附加依赖项” 根据错误中 ...
- C++中的初始化
C++中的RAII机制指明”对象创建时通过构造函数进行初始化,析构时通过析构函数释放资源”,但实际中因类无构造函数时编译器将自动合成一个默认构造函数,该构造函数只服务于自身编译器构造需要而不负责对象成 ...
- vi 编辑器命令 (share)
转自:http://man.ddvip.com/soft/vieditor/vi.html 一.Unix编辑器概述 编辑器是使用计算机的重要工具之一,在各种操作系统中,编辑器都是必不可少的部件.Uni ...
- Hive 实战(2)--hive分区分桶实战
前言: 互联网应用, 当Mysql单机遇到性能瓶颈时, 往往采用的优化策略是分库分表. 由于互联网应用普遍的弱事务性, 这种优化效果非常的显著.而Hive作为数据仓库, 当数据量达到一定数量时, 查询 ...
- 腾讯优测-优社区干货精选 | 那些年，我们在Android机型适配上遇到的坑之Camera拍照时快门咔嚓声
文/腾讯优测研发工程师 吴宇焕 优测小优有话说: android机型适配的坑自然是不少,不想掉坑快来优测优社区~ 现在Android手机一般都会带有照相功能,有很多朋友就发现手机照相时快门声音很响,想 ...
- NSDictionary读取数据类型异常问题.
起因:做网络交互时,经常会使用JSON作为数据的承载体,本来是件好事,但是用多了,发现iOS侧偶尔会出现异常,几经比较发现是服务器给的数据有问题,该给INT的给按照STR给了,服务器能做动态更新,可客 ...
- Codeforces Round #159 (Div. 2)
A. Sockets 当插口数不够时,显然找最大\(a_i\)进行扩展. B. Playing Cubes 枚举起始颜色,Petya会尽可能相同颜色,Vasya则相反. C. View Angle 极 ...
- struts2 ajax的一种实现方式
/** * ajax请求,通过省份id获取学习中心 */ public void getSitesByPid() { HttpServletResponse response = ServletAct ...
- python requests库入门［转］
首先,确认一下: Requests 已安装 Requests是 最新的 让我们从一些简单的示例开始吧. 发送请求 使用Requests发送网络请求非常简单. 一开始要导入Requests模块: > ...