我们在表单输入的时候，如要输入邮箱之类，只需输入邮箱名前段，那么@后面的内容将自动补全，将常用的几个邮箱列出来，用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成，这些都由插件completer来帮您实现。
效果展示图如下所示：
HTML
首先载入jQuery库和插件completer.js，当然还有相关CSS样式文件，这些都在源码下载里已打包好了。
rush:js;">
接下来我们在页面中需要放置输入框的地方放置如下代码，这是一个要求用户输入邮箱的输入表单。
rush:js;">
Javascript
直接$(element).completer()调用，非常简单，如果不想用函数调用的方式也可以在元素上使用data-toggle="completer"和data-*属性来调用插件效果。
rush:js;">
$(function(){
$("#auto-complete-email").completer({
separator: "@",source: ["163.com","qq.com","126.com","139.com","gmail.com","hotmail.com","icloud.com"]
});
});
选项设置
| ottom: rgb(211,211) 1px solid; padding-bottom: 2px; line-height: 26px; margin: 0px; padding-left: 2px; padding-right: 2px; border-right: rgb(211,211) 1px solid; padding-top: 2px">选项ottom: rgb(211,211) 1px solid; padding-top: 2px">说明ottom: rgb(211,211) 1px solid; padding-top: 2px">默认值ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">completeottom: rgb(211,211) 1px solid; padding-top: 2px">当输入完成时触发ottom: rgb(211,211) 1px solid; padding-top: 2px">function() {}ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">itemTagottom: rgb(211,211) 1px solid; padding-top: 2px">弹出展示面板中的列表元素标签ottom: rgb(211,211) 1px solid; padding-top: 2px">"li"ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">filterottom: rgb(211,211) 1px solid; padding-top: 2px">过滤函数，当输入后会先过滤相关列表内容再展示列表ottom: rgb(211,211) 1px solid; padding-top: 2px">function(val) { return val; }ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">positionottom: rgb(211,211) 1px solid; padding-top: 2px">弹出列表面板相对输入框的位置，值有"top","right","bottom","left".ottom: rgb(211,211) 1px solid; padding-top: 2px">"bottom"ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">sourceottom: rgb(211,211) 1px solid; padding-top: 2px">将要自动补全展示的数据ottom: rgb(211,211) 1px solid; padding-top: 2px">[]ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">selectedClassottom: rgb(211,211) 1px solid; padding-top: 2px">当弹出面板中的选项被选中时的样式ottom: rgb(211,211) 1px solid; padding-top: 2px">"completer-selected"ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">separatorottom: rgb(211,211) 1px solid; padding-top: 2px">分隔符，将输入的内容与建议自动完成的部分分隔，如@ottom: rgb(211,211) 1px solid; padding-top: 2px">""ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">suggestottom: rgb(211,211) 1px solid; padding-top: 2px">如果设置成true，将会进入建议suggestion模式，将自动匹配所输入的内容ottom: rgb(211,211) 1px solid; padding-top: 2px">falseottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> | ottom: rgb(211,211) 1px solid; padding-top: 2px">templateottom: rgb(211,211) 1px solid; padding-top: 2px">弹出面板的模板ottom: rgb(211,211) 1px solid; padding-top: 2px">"
ottom: rgb(211,211) 1px solid; padding-top: 2px">zIndexottom: rgb(211,211) 1px solid; padding-top: 2px">弹出面板的css中的z-index值ottom: rgb(211,211) 1px solid; padding-top: 2px">1
| 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。 相关推荐 |
