文档章节

使用jQuery Autocomplete(自动完成)插件

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 1077
阅读 95
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

 

jQuery 的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下。

最简单的Autocomplete(自动完成)代码片段

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
var websites = [
	"Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent", 
	"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {
	$("#website").autocomplete(websites);	
});
</script>
1
2
3
4
5
6
<p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
<div id="content"></div>

我们可以看到效果

jQuery Autocomplete Plugin

这么几行代码就完成了自动完成功能,真实太强了,不过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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$().ready(function() {
	$("#website").autocomplete(websites,{
		minChars: 0,
		max: 5,
		autoFill: true,
		mustMatch: true,
		matchContains: true,
		scrollHeight: 220,
		formatItem: function(data, i, total) {
			return "<I>"+data[0]+"</I>";
		},
		formatMatch: function(data, i, total) {
			return data[0];
		},
		formatResult: function(data) {
			return data[0];
		}
	});
});

在options项我们增加了好几个参数

minChars表示在自动完成激活之前填入的最小字符,这里我们设置为0,在我们双击文本框,不输入字符的时候,就会把数据显示出来,效果如下

jquery-autocomplete-21

max表示列表里的条目数,我们设置了5,所以显示5条,也如上图

autoFill表示自动填充,就是在文本框中自动填充符合条件的项目,看下图,在我们输入“g”的时候,文本框里填充了“google”

jQuery Autocomplete Plugin

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$().ready(function() {
 
	function findValueCallback(event, data, formatted) {
		$("#content").html("<strong>"+(!data ? "No match!" : "Selected: " + formatted)+"</strong>");
	}
 
	$("#website").autocomplete(websites,{
		minChars: 0,
		max: 5,
		autoFill: true,
		mustMatch: true,
		matchContains: true,
		scrollHeight: 220,
		formatItem: function(data, i, total) {
			return "<I>"+data[0]+"</I>";
		},
		formatMatch: function(data, i, total) {
			return data[0];
		},
		formatResult: function(data) {
			return data[0];
		}
	});
	$("#website").result(findValueCallback);
	$("#getvalue").click(function() {$("#website").search()});
});

看看是什么效果,会在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();

}

);

 

本文转载自:http://lgscofield.iteye.com/blog/1680151

lgscofield

lgscofield

粉丝 24
博文 141
码字总数 63275
作品 0
南京
架构师
私信 提问
加载中

评论(1)

jquery.autocomplete怎么没有获取到jsp传回的数据?

用jquery的插件jquery.autocomplete实现自动完成功能 medicineQuery.jsp页面代码(其中qpyName是输入文本框的id) medicineQueryData.jsp代码 Java2Json代码(用jackson进行解析生成json数据...

FoxHu
2012/01/04
2.1K
3
如何让 jquery autocomplete插件弹出下拉列表后鼠标放入搜索项回车文本框内容不变

使用jquery autocomplete插件,在弹出下拉列表后,鼠标放入搜索项,这时按回车键文本框的内容会变成搜索项的内容,怎么样才能不改变值?需要重写autocompleteselect方法吗?我看api中好像没有...

dzgcsmthmt
2015/05/30
414
1
JQuery autoComplete额外参数的问题

请教:为什么我使用jQuery autocomplete,想传入额外的参数给后台,但是一直额外的参数没有传成功? 前台代码: 服务端代码:

Torah
2016/03/07
1K
1
【转】solr+ajax智能拼音详解---solr跨域请求

  本文转自:http://blog.csdn.net/wangzhaodong001/article/details/8529090 最近刚做完solr的ajax智能拼音。总结一下。 前端:jQueryAutoComplete插件。插件详见http://download.csdn.ne...

无声胜有声
2015/12/16
0
0
VSCode之使用Settings Sync同步配置和插件

需求背景 自己平常工作,一般在公司用公司的电脑,在家里就是自己的,但是如果配置了新的内容,或者安装了新的插件,那每次都需要单独记录一下然后再重新配置一遍。使用插件可以直接同步配置...

osc_4nr2ziai
2019/12/12
1
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 头发和不要头发,你总要选一个

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雾 缀じた街 ふたつのかげ》- Porkkana 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
31分钟前
33
0
一道 算法题 引发的 ‘xx现场’

请 熟悉的语言 去 验证 在输入框中输入的是否是一个正确的网址 初次读题萌新有点 不知所措的样子一查 MDN 吓一跳 ----- 一个不怎么熟悉的方法跳出眼边URL() 构造函数返回一个新创建的 ...

酒窝yun过去了
39分钟前
19
0
如何检查jQuery中是否已选中复选框? - How to check whether a checkbox is checked in jQuery?

问题: I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. 我需要检查复选框的checked属性,并使用jQuery根据check......

技术盛宴
40分钟前
12
0
mongoose 使用

http://www.mongoosejs.net/ 编写MongoDB验证,转换和业务逻辑是非常麻烦的. 所以Mongoose应运而生了. const mongoose = require('mongoose');mongoose.connect('mongodb://localhost/te......

东东笔记
47分钟前
10
0
微服务

什么是微服务? 使用一套小服务来开发单个应用的方式,每个服务运行在独立的进程里,一般采用轻量级的通讯机制互联,并且他们可以通过自动化的方式部署。 微服务的特征 单一职责 轻量级通信 ...

鸿FW
今天
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部