恢復內容開始 當我們註冊或者登錄要用郵箱格式時會顯示郵箱尾碼的提示下拉框 效果如圖所示 主要介紹了JS輸入用戶名自動顯示郵箱尾碼列表的方法,可實現自動顯示郵箱尾碼名列表的功能， 原理是：一個輸入框 當我輸入任何字的時候 自動下拉相應的郵箱提示，在輸入框輸入11的時候 下拉框有所有11的郵箱 輸入其他 ...
---恢復內容開始---
當我們註冊或者登錄要用郵箱格式時會顯示郵箱尾碼的提示下拉框
效果如圖所示
主要介紹了JS輸入用戶名自動顯示郵箱尾碼列表的方法,可實現自動顯示郵箱尾碼名列表的功能，
原理是：一個輸入框 當我輸入任何字的時候 自動下拉相應的郵箱提示，在輸入框輸入11的時候 下拉框有所有11的郵箱 輸入其他的時候 有其他文案對應的郵箱。
同理 此插件不需要任何html標簽，只需要一個輸入框 有相對應的id類名就ok 且父級有個class類名，其他的都不需要。內部的HTML代碼都是自動生成的
下麵便是此功能代碼;
此段代碼引用了jq 所以需要先引入jq.js;
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
把我們需要提示的郵箱尾碼存入數組；
var emailsorce = ["@sina.com", "@163.com", "@qq.com", "@126.com", "@vip.sina.com",
"@sina.cn", "@hotmail.com", "@gmail.com", "@sohu.com", "@yahoo.cn", "@139.com",
"@wo.com.cn", "@189.cn"];
接下來就是面向對象的內容，中間都有註釋；
var email={
init:function(){
var that=this;
$("#email").focus(function(){
if($(this).val()==""){
that.hint();
}else{
$("#closeuser").css({"display": "block"});//消除按鈕顯示
}
})
},
bindeven:function(){
this.chose();
this.delet();
this.miss();
},
miss:function(){//失去焦點刪除按鈕隱藏 下拉選項消失 判斷是否為郵箱格式
$("#email").blur(function(){
$("#closeuser").css({"display": "none"});
$("#sele").css({"display": "none"});
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;//郵箱正則表達式
if(filter.test($("#email").val())){//是郵箱格式
$("#email").css({"border":"0.1rem solid #0cbd19"})
}else{//不是郵箱格式
$("#email").css({"border":"0.1rem solid #ff072f"})
}
})
},
hint:function(){//初始輸入出現郵箱選項 消除按鈕出現
var that=this;
$("#email").on("input",function(){
if($(this).val()!=""){
if($(this).val().indexOf("@")==-1){//是否輸入到@
$("#sele").html("");//每次輸入初始化
$("#sele").css({"display": "block"});
for(var i=0;i<emailsorce.length;i++){//把集合的郵箱加入li中
var li=$("<li>"+$(this).val()+emailsorce[i]+"</li>");
$("#sele").append(li);
}
$("#closeuser").css({"display": "block"});//消除按鈕顯示
}else{
var arr=$(this).val().split("@");
if(arr[1]!=""){//篩選@之後的內容
$("#sele").html("");//每次輸入初始化
for(var i=0;i<emailsorce.length;i++){
var temp=emailsorce[i].split(".")[0];
if(temp.indexOf(arr[1])!=-1){//篩選選項是否含有輸入的內容 有顯示 沒有隱藏
var li=$("<li>"+arr[0]+emailsorce[i]+"</li>");
$("#sele").append(li);
}
}
}
}
}else{
//單框內沒內容消除按鈕隱藏 下拉選項隱藏
$("#closeuser").css({"display": "none"});
$("#sele").css({"display": "none"});
}
})
},
chose:function(){
$(document).on("touchstart","#sele li",function(){
//點擊下拉框選項 框內內容為點擊選項 下拉框消失 刪除按鈕消失
$("#email").val($(this).html());
$("#closeuser").css({"display": "none"});
$("#sele").css({"display": "none"});
})
},
delet:function(){
//框內內容刪除 下拉框隱藏
$(document).on("touchstart","#closeuser",function(){
//點擊消除按鈕事件
$("#email").val("");
$("#sele").css({"display": "none"});
$("#closeuser").css({"display": "none"});
})
}
}
下麵只要調用就ok了；
email.init(); email.bindeven();
一、功能分析： 1.input輸入框的值，發生變化時，顯示提示的下拉層; 2.input輸入框的值，發生變化時，顯示提示的下拉層，會根據輸入的內容自動往“@”前面添加; 3.input輸入框的值，發生變化時，顯示提示的下拉層，會根據輸入的內容對下拉層“@”後面的內容進行篩選; 4.點擊下拉層裡面的提示內容，會將其值，填充到輸入框; 5.按下滑鼠回車鍵會將其選中的下拉層里的內容，填充到輸入框; 6.按鍵盤的“向上”或“向下”的方向鍵，可以在下拉層的選項中移動（迴圈移動，改變當前LI的背景色）; 7.滑鼠懸停在下拉層的LI上面時，會有一個背景色。 二、功能實現： 1.input輸入框的值，發生變化時的事件是：propertychange（IE）或input(標準); 2.在發生propertychange事件的時候，取其輸入框的值，再取其“@”前面的值，並賦值給下拉層裡面的LI加上LI的email屬性值; 3.在發生propertychange事件的時候， 3.1取其輸入框的值，再取其“@”後面的值， 3.2並將這個值與下拉層裡面的LI的email屬性值進行正則匹配; 這裡要註意,正則字面量方法，是不能用變數的。所以這裡用的是new方式。 這裡的正則是取的輸入框“@”後面的值，所以正則，是變化的。而LI的EMAIL屬性值是不變的 4.這裡用了一個事件委托方式，將點擊事件綁定給document，然後通過判斷，點擊時最初觸發的DOM元素，是什麼。來決定， 4.1否隱藏下拉提示層？ 4.2還是需要將下拉層，選中的值，賦給輸入框 (這裡不能直接使用，當輸入框失去焦點時，隱藏下拉提示層，因為會與點擊下拉層，將其值填入輸入框，這個功能有邏輯上的矛盾;) 5.和上面第4條差不多; 6.就是要註意，在滑鼠懸停時，把當前的LI索引存入一個全局變數當中，這樣就可以告訴“向上”或“向下”按鍵時，的起始位置了;
