用面向對象解決 輸入用戶名自動顯示郵箱後綴列表的方法

---恢復內容開始---

當咱們註冊或者登陸要用郵箱格式時會顯示郵箱後綴的提示下拉框

效果如圖所示

主要介紹了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、功能分析： 　　1.input輸入框的值，發生變化時，顯示提示的下拉層; 　　2.input輸入框的值，發生變化時，顯示提示的下拉層，會根據輸入的內容自動往「@」前面添加; 　　3.input輸入框的值，發生變化時，顯示提示的下拉層，會根據輸入的內容對下拉層「@」後面的內容進行篩選; 　　4.點擊下拉層裏面的提示內容，會將其值，填充到輸入框; 　　5.按下鼠標回車鍵會將其選中的下拉層裏的內容，填充到輸入框; 　　6.按鍵盤的「向上」或「向下」的方向鍵，能夠在下拉層的選項中移動（循環移動，改變當前LI的背景色）; 　　7.鼠標懸停在下拉層的LI上面時，會有一個背景色。 2、功能實現： 　　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索引存入一個全局變量當中，這樣就能夠告訴「向上」或「向下」按鍵時，的起始位置了;