我們在表單輸入的時候，如要輸入郵箱之類，只需輸入郵箱名前段，那麼@後面的內容將自動補全，將常用的幾個郵箱列出來，用戶只需選擇一下就可以完成表單的輸入。諸如此類的還有時間的輸入、網域的輸入都能自動完成，這些都由插件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"]
});
}); 選項設定
| 選項 | 說明 | 預設值 |
| 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 | Template for popup panel | " |
| zIndex | Z-index value in popup panel’s css | 1 |
Completer plug-in provides rich option settings and method calls.
