jQuery自动完成插件completer附源码下载

我们在表单输入的时候，如要输入邮箱之类，只需输入邮箱名前段，那么@后面的内容将自动补全，将常用的几个邮箱列出来，用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成，这些都由插件pleter来帮您实现。

效果展示图如下所示

HTML

载入jQuery库和插件pleter.js，还有相关CSS样式文件，这些都在源码下载里已打包好了。

<script src="jquery.js"></script> 
<script src="pleter.js"></script> 
<link href="pleter.css" rel="stylesheet"> 

接下来我们在页面中需要放置输入框的地方放置如下代码，这是一个要求用户输入邮箱的输入表单。

<input type="text" id="auto-plete-email" class="form-control" placeholder="E-mail"> 

Javascript

直接$(element).pleter()调用，非常简单，如果不想用函数调用的方式也可以在元素上使用data-toggle="pleter"和data-属性来调用插件效果。

$(function(){ 
 $("#auto-plete-email").pleter({ 
  separator: "@", 
  source: ["163.", "qq.", "126.", "139.", "gmail.", "hotmail.", "icloud."] 
 }); 
}); 

选项设置

Completer插件提供了丰富的选项设置和方法调用。