jQuery
的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de
的比较强大,我们就来写一些代码感受一下。
最简单的Autocomplete(自动完成)代码片段
<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>
<p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
<div id="content"></div>
我们可以看到效果
这么几行代码就完成了自动完成功能,真实太强了,不过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]是一个可选项,我们在例子中就没有写,但这个参数里面却有很多可配置的参数,我们还是先修改上面的例子
$().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,在我们双击文本框,不输入字符的时候,就会把数据显示出来,效果如下
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( ),比如用户在选定了某个条目时需要触发一些别的方法时,着两个方法就可以起作用了,我们再修改以上的例子
$().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插件。
- 大小: 30.9 KB
- 大小: 36.2 KB
- 大小: 30.9 KB
分享到:
相关推荐
jquery autocomplete 自动完成 插件
jQuery自动完成插件autocomplete.zip
jquery-autocomplete 自动完成插件
autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete
jquery自动补全插件(jquery autocomplete) 内包含使用说明,前台+后台
Jquery autocomplete插件使用
jQuery plugin for autocomplete - jQuery自动完成插件
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
jquery 文本框 自动补全 ajax autocomplete 完整实例
jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...
[ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大) 谁用谁知道
NULL 博文链接:https://canrry.iteye.com/blog/750679
1.该js支持jquery的自动补全功能 2.因为jquery-ui是jquery的插件,所以部分版本jquery可能不支持该插件,建议换成内附的jquery.js 3.如有疑惑,请阅读内附的说明文档
最近刚开始学jquery,想实现类似GOOGLE搜索时自动显示出相关结果的效果。于是选择了使用jquery autocomplete插件。
使用Jquery AutoComplete 插件来做自动填充功能,包含本地数组,后台数据等情况
jquery搜索自动提示下拉框插件autocomplete
jQuery Autocomplete plugin 写的比较满意,拿出来分享,欢迎大家找BUG。
asp.net仿百度的自动完成(autoComplete) 使用Jquery autocomplete.js插件来完成自动完成,可以从数据库中读取数据 ajax异步显示数据!云计算QQ研究群:96191559
html5-autocomplete-suggestions插件实例包,是一个由HTML5与jQuery共同实现的表单输入自动完成的例子,当用户输入的时候,随着字符的输入,会自动匹配输入结果,以下拉的方式显示出匹配项,与百度搜索框的下拉提示...
Autocomplete Table是一个jQuery插件,提供自动完成下拉的多列表,(下拉)字段列表。浏览器要求ie9以上版本,演示地址:http://www.jq22.com/jquery-info529