用面向对象解决 输入用户名自动显示邮箱后缀列表的方法

---恢复内容开始---

当我们注册或者登录要用邮箱格式时会显示邮箱后缀的提示下拉框

效果如图所示

主要介绍了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索引存入一个全局变量当中，这样就可以告诉“向上”或“向下”按键时，的起始位置了;