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 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
使用refresh_token实现无感刷新页面
Apr 26 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中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
后勤工作职责
2013/12/22 职场文书
优秀交警事迹材料
2014/01/26 职场文书
操行评语大全
2014/04/30 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
买房协议书范本
2014/10/23 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
2015毕业寄语大全
2015/02/26 职场文书
社会实践心得体会范文
2016/01/14 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP