快捷導(dǎo)航

jQuery自動(dòng)完成插件completer附源碼下載

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

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

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

效果展示圖如下所示：

效果展示源碼下載

HTML

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

<script src="jquery.js"></script> 
<script src="completer.js"></script> 
<link href="completer.css" 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)用。

您可能感興趣的文章:

相關(guān)文章

JQuery中判斷一個(gè)元素下面是否有內(nèi)容或者有某個(gè)標(biāo)簽的判斷代碼
網(wǎng)站開(kāi)發(fā)時(shí)，我們時(shí)常需要把沒(méi)有內(nèi)容的標(biāo)簽隱藏或者去掉。在用JQ有兩種好的解決辦法
2012-02-02
jQuery對(duì)象和DOM對(duì)象使用說(shuō)明
jQuery對(duì)象和DOM對(duì)象使用說(shuō)明，需要的朋友可以參考下。
2010-06-06
jquery中獲取id值方法小結(jié)
ID是html頁(yè)面中一些元素都可以有個(gè)本頁(yè)面唯一的id包括如,div,input,iframe等等都是可以的,下面我來(lái)給大家介紹利用jquery 獲取id值方法,有需要了解的朋友可參考
2013-09-09
使用jQuery避免鼠標(biāo)雙擊的解決方案
用戶雙擊DOM對(duì)象（例如按鈕和鏈接等）時(shí)，對(duì)于用戶交互一直是個(gè)麻煩的問(wèn)題，如果你的元素點(diǎn)擊事件不止觸發(fā)一次，可以參考以下的解決方案
2013-08-08
jQuery動(dòng)畫_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
用JavaScript手動(dòng)實(shí)現(xiàn)動(dòng)畫效果，需要編寫非常復(fù)雜的代碼。下面給分享jQuery內(nèi)置的幾種動(dòng)畫樣式，需要的朋友參考下吧
2017-07-07
jquery實(shí)現(xiàn)鼠標(biāo)懸浮彈出氣泡提示框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)鼠標(biāo)懸浮彈出氣泡提示框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
詳解layui彈窗父子窗口之間傳參數(shù)的方法
本篇文章主要介紹了ayui彈窗父子窗口之間傳參數(shù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
用戶管理的設(shè)計(jì)_jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
下面小編就為大家?guī)?lái)一篇用戶管理的設(shè)計(jì)_jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
jQuery與ExtJS之選擇實(shí)例分析
對(duì)于我們的用途，jQuery是一個(gè)更合適。該js中的功能更難以配置，這是需要我們的處理的，這是很難定義。
2010-08-08
Easyui筆記2：實(shí)現(xiàn)datagrid多行刪除的示例代碼
本篇文章主要介紹了Easyui筆記2：實(shí)現(xiàn)datagrid多行刪除，詳細(xì)介紹了完成一個(gè)多行勾選并刪除的功能。有興趣的可以了解一下。
2017-01-01