我们在输入表单时，如果要输入邮箱，只需要输入邮箱名称的前部，那么@后的内容就会自动完成，并且会列出几个常用的邮箱，用户只需选择即可完成表单输入。等等，时间和域名的输入都可以自动完成，都是由插件完成器为你实现的。

渲染如下：

下载效果显示源代码。

超文本标记语言

首先，加载jQuery库、插件completer.js，当然还有相关的CSS样式文件，这些都已经打包在源代码下载中了。

script src=' http : jquery . js '/script script src=' http 3360 completor . js '/script link href=' completer . CSS ' rel='样式表'接下来，我们将下面的代码放在页面上需要放置输入框的地方，这是一个需要用户输入邮箱的输入表单。

输入类型=' text ' id=' auto-complete-email ' class=' form-control '占位符='E-mail' 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 '，' I cloud.com ']})；});选项设置

说明：选项complete的默认值在输入完成时触发函数()。{}项目标签在显示面板中弹出列表元素标签“li”过滤功能。输入后，会先过滤相关列表内容，然后是列表函数(val){ return val；}位置弹出列表面板相对于输入框的位置，值为“上”、“右”、“下”。左边。“底部”源将自动完成显示的数据[] selectedClass。当选择了弹出面板中的选项时，样式“completer-selected”分隔符将输入内容与建议自动完成的部分分开。例如，如果@ ' '建议设置为真，将进入建议模式，并将自动匹配输入内容。假模板弹出面板的模板' ul class=' completer-container '/ul ' zindex z-index值在弹出面板的css中。