jQuery自動完成插件completer附源碼下載

更新時間：2016年01月04日 09:51:32 投稿：mrr

這篇文章主要介紹了jQuery自動完成插件completer的相關(guān)資料,需要的朋友可以參考下

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

效果展示圖如下所示：

效果展示源碼下載

HTML

首先載入jQuery庫和插件completer.js，當然還有相關(guān)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()調(diào)用，非常簡單，如果不想用函數(shù)調(diào)用的方式也可以在元素上使用data-toggle="completer"和data-*屬性來調(diào)用插件效果。

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

選項設(shè)置

選項	說明	默認值
complete	當輸入完成時觸發(fā)	function() {}
itemTag	彈出展示面板中的列表元素標簽	"li"
filter	過濾函數(shù)，當輸入后會先過濾相關(guān)列表內(nèi)容再展示列表	function(val) { return val; }
position	彈出列表面板相對輸入框的位置，值有"top", "right", "bottom", "left".	"bottom"
source	將要自動補全展示的數(shù)據(jù)	[]
selectedClass	當彈出面板中的選項被選中時的樣式	"completer-selected"
separator	分隔符，將輸入的內(nèi)容與建議自動完成的部分分隔，如@	""
suggest	如果設(shè)置成true，將會進入建議suggestion模式，將自動匹配所輸入的內(nèi)容	false
template	彈出面板的模板	"<ul class="completer-container"></ul>"
zIndex	彈出面板的css中的z-index值	1