最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于jQuery自动完成插件completer使用教程
时间:2016-01-04 编辑:简简单单 来源:一聚教程网
我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成,这些都由插件completer来帮您实现。
HTML
首先载入jQuery库和插件completer.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了。
css" rel="stylesheet">
接下来我们在页面中需要放置输入框的地方放置如下代码,这是一个要求用户输入邮箱的输入表单。
Javascript
直接$(element).completer()调用,非常简单,如果不想用函数调用的方式也可以在元素上使用data-toggle="completer"和data-*属性来调用插件效果。
$(function(){
$("#auto-complete-email").completer({
separator: "@",
source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]
});
});
选项设置
Completer插件提供了丰富的选项设置和方法调用。
选项 | 说明 | 默认值 |
complete | 当输入完成时触发 | function() {} |
itemTag | 弹出展示面板中的列表元素标签 | "li" |
filter | 过滤函数,当输入后会先过滤相关列表内容再展示列表 | function(val) { return val; } |
position | 弹出列表面板相对输入框的位置,值有"top", "right", "bottom", "left". | "bottom" |
source | 将要自动补全展示的数据 | [] |
selectedClass | 当弹出面板中的选项被选中时的样式 | "completer-selected" |
separator | 分隔符,将输入的内容与建议自动完成的部分分隔,如@ | "" |
suggest | 如果设置成true,将会进入建议suggestion模式,将自动匹配所输入的内容 | false |
template | 弹出面板的模板 | " |
zIndex | 弹出面板的css中的z-index值 | 1 |
相关文章
- jquery实现自动逐字打印效果(像黑客电影一样) 01-28
- jquery 当文本域获得焦点时自动变大 08-28
- jQuery 滑动门自动滑动实现代码 07-17
- 基于jquery AutoComplete 自动完成插件 11-04
- jQuery Autocomplete自动完成插件代码应用 07-18
- HTML简单购物数量小程序代码展示 10-31