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中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jQuery侧边栏实现代码
May 06 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
列表内容的选择
2006/06/30 Javascript
javaScript对象和属性的创建方法
2007/01/15 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
EsLint入门学习教程
2017/02/17 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python实现kNN算法
2017/12/20 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python pip使用超时问题解决方案
2020/08/03 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
工伤赔偿协议书
2014/04/15 职场文书
大学生新学期计划书
2014/04/28 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
公司地址变更通知
2015/04/25 职场文书
小学班主任心得体会
2016/01/07 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
深入理解 Golang 的字符串
2022/05/04 Golang