[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 ...
随机推荐
- 2016 - 1 - 24 NSURLSession （一）
一: NSURLSession简介 1.实施步骤 1.1 使用 NSURLSession对象 创建TASK ,然后执行TASK 2.TASK的类型: 二: NSURLSession的简单使用: - ( ...
- apache2服务器mod_rewrite模块 开启方法[linux, ubuntu]
在UBUNTU系统中要启用mod_rewrite的方法有两种: 第一种: 在终端中执行 sudo a2enmod rewrite 指 令后,即启用了 Mod_rewrite 模块, apache2服务 ...
- 浅谈SEO-提交(一)
前段时间,花了点时间研究了下SEO,Search Engine Optimization,百度百科这样描述: 中文意译为“搜索引擎优化”.SEO是指通过对网站内部调整优化及站外优化,使网站满足搜索引擎 ...
- C#常用操作类库三(XML操作类)
/// <summary> /// XmlHelper 的摘要说明. /// xml操作类 /// </summary> public class XmlHelper { pr ...
- Python::OS 模块 -- 文件和目录操作
os模块的简介参看 Python::OS 模块 -- 简介 os模块的进程管理 Python::OS 模块 -- 进程管理 os模块的进程参数 Python::OS 模块 -- 进程参数 os模块中包 ...
- ThreadPoolExecutor机制探索－我们到底能走多远系列(41)
我们到底能走多远系列(41) 扯淡: 这一年过的不匆忙,也颇多感受,成长的路上难免弯路,这个世界上没人关心你有没有变强,只有自己时刻提醒自己,不要忘记最初出发的原因. 其实这个世界上比我们聪明的人无数 ...
- linux下locate为什么有时候某些文件
这与locate命令的工作原理有关.他是通过查询数据库的方式查找文件的.并且数据库每天更新一次.你要找的文件可能没有更新到数据库中. 可以有两种选择: 第一,过一天后再查看一下,应该就会找到了. 第二 ...
- php wampserver 80 端口无法开启的解决方法
下载Microsoft Visual C++ 2005 Redistributable Package x86 和 x64(vc_redist.x86.exe/vc_redist.x64.exe) 安 ...
- 《统计推断（Statistical Inference）》读书笔记——第3章 统计分布族
在科学研究中最重要的两种思维范式是“简化”和“还原”,所谓“简化”是指人依据不太复杂的,可理解的规律认识世界:所谓“还原”是指任何复杂的现象归根结底可以由若干简单的机制解释.各种统计分布族就是统计学中 ...
- RequestContextListener作用
spring IOC容器实例化Bean的方式有: singleton 在spring IOC容器中仅存在一个Bean实例,Bean以单实例的方式存在. prototype ...