使用jQuery Autocomplete(自动完成)插件
jQuery 的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下。
最简单的Autocomplete(自动完成)代码片段
1 |
<script type="text/javascript"> |
1 |
<p> |
我们可以看到效果
这么几行代码就完成了自动完成功能,真实太强了,不过bassistance.de的jQuery Autocomplete插件还有更丰富的功能,它的文档在http://docs.jquery.com/Plugins/Autocomplete ,在API Documentation里,我们要仔细的研究一下autocomplete( url or data, [options] )方法。
autocomplete方法有两个参数,第一个用来填写URL地址或是数据,jQuery Autocomplete插件是支持Ajax方式调用数据,所以可以填写调用的地址,另外可以直接填写数据,格式为JavaScript数组,如我们的例子,autocomplete的另外一个参数 [options]是一个可选项,我们在例子中就没有写,但这个参数里面却有很多可配置的参数,我们还是先修改上面的例子
1 |
$().ready(function() { |
在options项我们增加了好几个参数
minChars表示在自动完成激活之前填入的最小字符,这里我们设置为0,在我们双击文本框,不输入字符的时候,就会把数据显示出来,效果如下
max表示列表里的条目数,我们设置了5,所以显示5条,也如上图
autoFill表示自动填充,就是在文本框中自动填充符合条件的项目,看下图,在我们输入“g”的时候,文本框里填充了“google”
mustMatch表示必须匹配条目,也就是在文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空
matchContains表示包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示,比如在上面的图中,我们输入了“g”,由于“Sogou”中也包含一个“g”,所以会显示出来,如果将matchContains设为fasle,则“Sogou”就不会显示
scrollHeight不用多解释,看文档就知道。
后面3个参数formatItem、formatMatch、formatResult非常有用,formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体,formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。
[options]里还有很多有用的参数,大家可以看它的文档。
jQuery Autocomplete插件里还有两个重要的方法,一个是result( handler ),一个是search( ),比如用户在选定了某个条目时需要触发一些别的方法时,着两个方法就可以起作用了,我们再修改以上的例子
1 |
$().ready(function() { |
看看是什么效果,会在content div的地方显示出我们选择的内容。
jQuery Autocomplete插件所带的例子还是很好的,大家可以仔细研究一下它的例子,更加灵活的运用jQuery Autocomplete插件。
PS:附加一点界面上的模糊搜索功能:
// 模糊搜索
$("#blurQueryCond_value").keyup(function() {
$("#cacheInstanceList_body tr").hide();
var $d = $("#cacheInstanceList_body tr").filter(":contains('" + $.trim($("#blurQueryCond_value").val()) + "')");
$d.show();
}
);
- jquery.autocomplete.zip (549.6 KB)
- 下载次数: 774
使用jQuery Autocomplete(自动完成)插件的更多相关文章
- 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了
在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...
- 30+最佳Ajax jQuery的自动完成插件的例子
在这篇文章中,我们将介绍35个jQuery AJAX的自动完成提示例子. jQuery 的自动完成功能,使用户快速找到并选择一定的价值.每个人都想要快速和即时搜索输入栏位,因为这个原因,许 流行的搜索 ...
- jQuery图片自动添加水印插件
JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...
- jQuery AutoComplete 自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
- jquery autocomplete自动补全
简单用法: $(function(){ var data = "the People's Republic of China".split(" "); $(&q ...
- Bootstrap Typeahead/Jquery autocomplete自动补全
使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...
- jquery.autocomplete自动补全功能
项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...
- jquery.autocomplete自动补齐和自定义格式
1.简单的下拉自动补齐,可以使用本地或远程数据源 <input name="autoTag" id="autoTag" /> var source ...
- GBin1插件推荐之马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin
让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...
随机推荐
- SWFUpload - JQuery上传插件
首先,大家可以去SWF的官网下载相关Demo或者源码. 官方地址:http://code.google.com/p/swfupload/ 官方Demo:http://demo.swfupload.or ...
- servlet(1)
一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向 ...
- (l老陈-小石头)典型用户、用户故事、用例图
一.典型用户 老陈 小石头 二.用户故事 老陈:作为一个家长,我希望能利用软件在电脑上储存一些数学题目,以便在繁忙的工作中也能帮助到孩子提高数学. 小石头:作为一个小学二年级的小学生,我希望能利用软件 ...
- Xcode6 storyboard new push segue 后的视图控制器没有navigation item bug.
手动切一下 老的push,再切回来,就会出有了,我想是一个bug. Xcode 6 Segue with UINavigationItem up vote0down votefavorite I' ...
- 烧写ARM开发板系统教程----->uboot 、内核以及文件系统
一.sd启动 将u-boot镜像写入SD卡,将SD卡通过读卡器接上电脑(或直接插入笔记本卡槽),通过"cat /proc/partitions"找出SD卡对应的设备,我的设备节点是 ...
- 隐藏UITableView多余的分割线
先看看没有隐藏是什么效果以及代码是什么情况,这样更加直观
- T卡热插拔
1.配置: GPIO 管脚 GPIO方向 Debounce polarity Sensitive_level Host1 CDpin (EINT16) 16 INPUT PULL UP Enable ...
- (原创)基于CloudStack的平安云-云主机的生命周期
一.购买云主机1.条件筛选 涉及环境.应用系统.区域.网络.操作系统.套餐.期限.数量筛选2.校验 2.1 应用系统角色权限校验 2.2 应用系统可用配置校验 2.3 产品区域是否下架 ...
- Wiki语料处理
最近在做知识图谱相关工作,源数据主要来自百度百科,互动百科,中文维基百科等.其中中文维基百科提供数据库下载,下文主要讨论如何处理Wiki数据. 1. 中文维基数据下载 下载dump:https://d ...
- 使用ssh key的方式建立和git服务器的通信
1.以前大家好像都在用https的方式同git来同步代码,但是到了新公司后,主管说要配ssh key,所以大概了解一下 An SSH key allows you to establish a sec ...