文本框郵箱地址自動提示jQuery插件

正所謂「一圖勝千言」，參見下面的截圖：

就是在須要輸入郵箱地址的地方給以郵箱地址的提示，簡化輸入，提升用戶體驗。

2、demo與下載

要查看插件使用效果，您能夠狠狠地點擊這裏：郵箱地址自動提示demo

目前版本爲3.1，您能夠狠狠地點擊這裏： jquery.mailAutoComplete-3.1.js

3、插件的使用

使用很方便的，方法名爲：mailAutoComplete，以下面最簡單的使用實例：

$("#test").mailAutoComplete();

表示的意思就是id爲test的文本框輸入文字時會有郵件地址提示。

插件中有一套本身的樣式，顏色爲#369與#fff兩色。大體效果以下圖：

固然，您能夠自定義您本身的列表樣式，留給您的API爲一些可自定義的class。您能夠看下錶（此插件的一些參數）：

參數	默認值	說明
boxClass	mailListBox	指類名 字符串 表最外框的樣式
listClass	mailListDefault	類名 字符串 默認的列表樣式
focusClass	mailListFocus	類名 字符串 當前選中的列表的樣式
markCalss	mailListHlignt	類名 字符串 指高亮字符的樣式
zIndex	1	整數 浮動層的層級
autoClass	true	布爾型 指是否使用插件自帶的樣式
mailArr	["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","souhu.com","sina.com"]	提示的數組內容
textHint	false	Boolean型，是否默認文字顯示隱藏
hintText	「」	默認提示文字
focusColor	#333	文本框獲取焦點時文字顏色
blurColor	#999	文本框失去焦點時文字顏色

不難看出，只要替換boxClass這幾個class名爲您本身定義的class名就能夠了。舉個例子，我寫了這樣的CSS樣式代碼：

.out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;}
.list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;}
.focus_box{background:#f0f3f9;}
.mark_box{color:#c00;}

若是應用在此插件上呢，簡單，一個一個替換就能夠了，以下js代碼：

$("#customTest").mailAutoComplete({
    boxClass: "out_box",
    listClass: "list_box",
    focusClass: "focus_box",
    markCalss: "mark_box",
    autoClass: false
});

記住，autoClass最好設置爲false（非必須）。

而後，就會有相似下面的樣式表現：

4、其餘一些說明

一、此插件爲寬度自適應的，也就是當內部文字過長時，外部的div會寬度自動延伸的。在自定義CSS時若是設置了寬度值，則在非IE6瀏覽器下，寬度自適應失效；
二、無需在樣式中爲最外部的box設置position屬性，或是寬度及高度，這些工做jQuery 插件已經幫你完成，設置了這些屬性反而不利於效果的展示；
三、此插件只能使用在單行文本框上，因爲未對其餘標籤類型的元素作限制，因此若是綁定對象不正確，可能會出現一些意想不到的狀況；
四、文本框的父標籤（或是祖父標籤）儘可能避免設置position:relative屬性，這可能會形成IE6下z-index錯亂的問題，具體參見個人「IE6下z-index犯癲不起做用bug的初步研究」一文；
五、郵箱地址列表能夠經過上下鍵或是鼠標移動進行選擇，「單擊」或是「回車」可返回您想要輸入的郵箱地址。

最後，我在js方面仍是很稚嫩的，代碼的層次，可讀性以及維護性仍是很欠火候的，因此此插件並非很盡善盡美，只能湊合湊合使用。雖然花了很多時間修復了一些bug，可是潛在的bug在所不免，歡迎指正，我將盡力及時更新。您能夠經過評論提出您的寶貴意見，或是去這裏進行一些交流。

就這些，我要看球賽了，呵呵哈哈~~

5、更新

#2010-08-18 以前的郵件提示在IE6下效率較低，郵件列表多時有明顯的卡的感受，因此，此次對郵件列表顯示的方法進行了從新修改。運行顯示效率有了很大的提升。
您能夠狠狠地點擊這裏：jquery.mailAutoComplete-3.0.js

相比上一版插件，此次的v3版暫時不支持多input框的郵件提示，也就是隻有頁面上綁定的第一個元素有郵件的自動的下拉提示。可是，我想這已經知足絕大多數的狀況了。之後有時間，我會使其支持多對象綁定。

#2010-09-03 新添加了提示文字自動顯示隱藏的功能，以及獲取焦點，失去焦點時文字顏色改變的功能。因此，又添加了幾個參數，爲 textHint，hintText，focusColor，以及blurColor，默認依次爲」false」,空字符串, 「#333″, 「#999″。要啓用默認文字提示顯隱功能需設置textHint爲」true」，同時hintText的文字爲input框中默認顯示的文字。

您能夠狠狠地點擊這裏：jquery.mailAutoComplete-3.1.js

轉自：張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]