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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
sails框架的学习指南
2014/12/22 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
Seajs源码详解分析
2019/04/02 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
详解python3中的真值测试
2018/08/13 Python
Python中的引用知识点总结
2019/05/20 Python
Python实现最大子序和的方法示例
2019/07/05 Python
详解python中的lambda与sorted函数
2020/09/04 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
艺术专业大学生自我评价
2013/09/22 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
结婚典礼证婚词
2014/01/11 职场文书
25岁生日感言
2014/01/13 职场文书
国际贸易系求职信
2014/08/09 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server