Jquery AutoComplete自动完成 的使用方法实例


Posted in Javascript onMarch 19, 2010

jquery-autocomplete配置:
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />

首先是一个最简单的Autocomplete(自动完成)代码片段:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>AutoComplate</title> 
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script> 
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" /> 
<script type="text/javascript"> 
$(function() { 
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); $('#keyword').autocomplete(data).result(function(event, data, formatted) { 
alert(data); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input id="keyword" /> 
<input id="getValue" value="GetValue" type="button" /> 
</div> 
</form> 
</body> 
</html>

result方法是jQuery Autocomplete插件里的重要方法,它在用户在选定了某个条目时触发。data参数为选中的数据。

一个稍微复杂的例子,可以自定义提示列表:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>自定义提示</title> 
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script> 
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" /> 
<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(emails, { 
max: 12, //列表里的条目数 
minChars: 0, //自动完成激活之前填入的最小字符 
width: 400, //提示的宽度,溢出隐藏 
scrollHeight: 300, //提示的高度,溢出显示滚动条 
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示 
autoFill: false, //自动填充 
formatItem: function(row, i, max) { 
return i + '/' + max + ':"' + row.name + '"[' + row.to + ']'; 
}, 
formatMatch: function(row, i, max) { 
return row.name + row.to; 
}, 
formatResult: function(row) { 
return row.to; 
} 
}).result(function(event, row, formatted) { 
alert(row.to); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input id="keyword" /> 
<input id="getValue" value="GetValue" type="button" /> 
</div> 
</form> 
</body> 
</html>

formatItem、formatMatch、formatResult是自定提示信息的关键。
formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体。
formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,
formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。

jquery bassistance.de AutoComplete自动完成效果代码下载

Javascript 相关文章推荐
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 #Javascript
jQuery 前的按键判断代码
Mar 19 #Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 #Javascript
JS 有名函数表达式全面解析
Mar 19 #Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 #Javascript
JavaScript 高效运行代码分析
Mar 18 #Javascript
JS setCapture 区域外事件捕捉
Mar 18 #Javascript
You might like
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python检测是文件还是目录的方法
2015/07/03 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
简单了解python模块概念
2018/01/11 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python动态视频下载器的实现方法
2019/09/16 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
文明村创建实施方案
2014/03/27 职场文书
拔河比赛口号
2014/06/10 职场文书
先进班集体事迹材料
2014/12/25 职场文书
项目负责人岗位职责
2015/02/15 职场文书