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取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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新手上路(七)
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python开头的coding设置方法
2019/08/08 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
为什么group by 和order by会使查询变慢
2014/05/16 面试题
最新党员思想汇报
2014/01/01 职场文书
教师个人考察材料
2014/12/16 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python