我們在表單輸入的時候，如要輸入郵箱之類，只需輸入郵箱名前段，那么@后面的內容將自動補全，將常用的幾個郵箱列出來，用戶只需選擇一下就可以完成表單的輸入。諸如此類的還有時間的輸入、域名的輸入都能自動完成，這些都由插件completer來幫您實現。

效果展示圖如下所示：

效果展示       源碼下載

HTML

首先載入jQuery庫和插件completer.js，當然還有相關CSS樣式文件，這些都在源碼下載里已打包好了。

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

接下來我們在頁面中需要放置輸入框的地方放置如下代碼，這是一個要求用戶輸入郵箱的輸入表單。

<input type="text" id="auto-complete-email" class="form-control" placeholder="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", "icloud.com"]  }); }); 

選項設置

Completer插件提供了豐富的選項設置和方法調用。