[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 ...
随机推荐
- phpdesigner 的配置
PHPDesigner 1.语言点击“view->language->”选择2.配置localhost点击“工具->配置->调试->本地”local服务器路径写自己的工作 ...
- QUICK START GUIDE
QUICK START GUIDE This page is a guide aimed at helping anyone set up a cheap radio scanner based on ...
- html页面的head标签下
head区是指首页html代码的<head>和</head>之间的内容. 必须加入的标签 1.公司版权注释 <!--- the site is designed b ...
- HDU 1536 & 1944
http://acm.hdu.edu.cn/showproblem.php?pid=1536 http://acm.hdu.edu.cn/showproblem.php?pid=1944 一样的题 题 ...
- 12-1 mysql的增删改减
增加数据:insert into 表名 values('','');insert into 表名(列名) values('');注意:1.如果添加 得数据是字符串,需要加'',其他类型不要加. 2.添 ...
- hashmap的hash算法( 转)
HashMap 中hash table 定位算法: int hash = hash(key.hashCode()); int i = indexFor(hash, table.length); 其中i ...
- ES6 － promise对象
Promise的设计初衷 我们使用ajax请求数据,得到数据后再对数据进行操作,可是有时候,对得到的数据进行操作的过程中,可能又要用到ajax请求,这时,我们的代码就变成了这样: $.ajax({ s ...
- HttpClient_4 用法 由HttpClient_3 升级到 HttpClient_4 必看
转自:http://www.blogjava.net/stevenjohn/archive/2012/09/26/388609.html HttpClient程序包是一个实现了 HTTP 协议的客户端 ...
- JS特殊函数(Function()构造函数、函数直接量)区别介绍
函数定义 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 函数的构造语法有这三种: 1.function functionName(arg0, ...
- 使用swipecard实现卡片视图左右滑动监听以及点击监听
前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但 ...