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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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/11/25 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
在JavaScript中调用php程序
2009/03/09 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
python list排序的两种方法及实例讲解
2017/03/20 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
python中K-means算法基础知识点
2021/01/25 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
美发活动策划书
2014/01/14 职场文书
数学系毕业生求职信
2014/05/29 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python