成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

我們?cè)诒韱屋斎氲臅r(shí)候，如要輸入郵箱之類(lèi)，只需輸入郵箱名前段，那么@后面的內(nèi)容將自動(dòng)補(bǔ)全，將常用的幾個(gè)郵箱列出來(lái)，用戶只需選擇一下就可以完成表單的輸入。諸如此類(lèi)的還有時(shí)間的輸入、域名的輸入都能自動(dòng)完成，這些都由插件completer來(lái)幫您實(shí)現(xiàn)。

效果展示圖如下所示：

效果展示 源碼下載

HTML

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

<script src="http://www.gimoo.net/t/1904/jquery.js"></script> 
<script src="http://www.gimoo.net/t/1904/completer.js"></script> 
<link  rel="stylesheet"> 

接下來(lái)我們?cè)陧?yè)面中需要放置輸入框的地方放置如下代碼，這是一個(gè)要求用戶輸入郵箱的輸入表單。

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

Javascript

直接$(element).completer()調(diào)用，非常簡(jiǎn)單，如果不想用函數(shù)調(diào)用的方式也可以在元素上使用data-toggle="completer"和data-*屬性來(lái)調(diào)用插件效果。

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

選項(xiàng)設(shè)置

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

Completer插件提供了豐富的選項(xiàng)設(shè)置和方法調(diào)用。