jQuery 邮箱提示输入

1。jQuery代码

/**
 * Created by qqg on 2017/12/5.
 */
(function($){
    $.fn.extend({//对jquery方法的扩展
        "changeTips":function(value){
            value= $.extend({divTip:""},value)

            var $this = $(this);
            var indexLi = 0;

            //点击document隐藏下拉层
            $(document).click(function(event){
                if($(event.target).attr("class")== value.divTip || $(event.target).is("li")){//value.divTip即on_changes 他的类是on_changes或者当前对象是li
                    var liVal = $(event.target).text();
                    $this.val(liVal);
                    blus();
                }else{
                    blus();
                }
            })

            //隐藏下拉层
            function blus(){
                $(value.divTip).hide();
            }

            //键盘上下执行的函数
            function keychang(up){
                if(up== "up"){
                    if(indexLi== 1){
                        indexLi= $(value.divTip).children().length-1;//当index是1，选择了向上时，不进去o,而是选择了列表的最后一个
                    }else{
                        indexLi--;
                    }
                }else{//选择了向下
                    if(indexLi== $(value.divTip).children().length-1){//当是最后一个的时候，仍然选择下一个时，回到index=1处
                        indexLi= 1;
                    }else{
                        indexLi++;
                    }
                }
                $(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();//indexli加上高亮，其他去掉
            }

            //值发生改变时
            function valChange(){
                var tex = $this.val();//输入框的值
                var fronts = "";//存放含有“@”之前的字符串
                var af = /@/;
                var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法，是不能用变量的。所以这里用的是new方式。


                //让提示层显示，并对里面的LI遍历
                if($this.val()==""){
                    blus();
                }else{
                    $(value.divTip).
                    show().
                    children().
                    each(function(index){
                        var valAttr = $(this).attr("email");//@163.com @qq.com等内
                           if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();
                           }
                        //索引值大于1的LI元素进处处理
                        if(index>1){
                            //当输入的值有“@”的时候
                            if(af.test(tex)){
                                //如果含有“@”就截取输入框这个符号之前的字符串
                                fronts= tex.substring(tex.indexOf("@"),0);
                                $(this).text(fronts+valAttr);
                                //判断输入的值“@”之后的值，是否含有和LI的email性
                                if(regMail.test($(this).attr("email"))){
                                    $(this).show();
                                }else{
                                    if(index>1){
                                        $(this).hide();
                                    }
                                }
                            }
                            //当输入的值没有“@”的时候
                            else{
                                $(this).text(tex+valAttr);
                            }
                        }
                    })
                }
            }


            //输入框值发生改变的时候执行函数，这里的事件用判断处理浏览器兼容性;
            if(window.ActiveXObject || "ActiveXObject" in window){//判断是否是ie浏览器  js 1.9 以后不能用这个方法  $.browser.msie
                $(this).bind("propertychange",function(){
                    valChange();
                })
            }else{//非ie
                $(this).bind("input",function(){
                    valChange();
                })
            }

            //鼠标点击和悬停LI
            $(value.divTip).children().
            hover(function(){
                indexLi= $(this).index();//获取当前鼠标悬停时的LI索引值;
                if(indexLi!=0){//索引值不是0
                    $(this).addClass("active").siblings().removeClass();//当前的节点加上class属性，他的兄弟节点失去class属性
                }
            })

            //按键盘的上下移动LI的背景色
            $this.keydown(function(event){
                if(event.which== 38){//向上
                    keychang("up");
                }else if(event.which == 40){//向下
                    keychang();
                }else if(event.which == 13){ //回车
                    var liVal = $(value.divTip).children().eq(indexLi).text();//列表中第当前索引的
                    $this.val(liVal);
                    blus();//隐藏下拉层
                }
            })
        }
    })
})(jQuery)

2.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">


    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>

   <!-- <script type="text/javascript" src="js/inputmail.js"></script>-->
    <script type="text/javascript" src="js/emailTip2.js"></script>
    <title>Title</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body { font:12px/1.8 Arial; color:#666;}
        ul,li{ list-style:none;}
        h1.tit-h1 { font-size:38px;text-align:center; margin:30px 0 15px; color:#f60;}
        .go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
        .wrap{border:1px dashed #ccc;background:#f8f8f8; padding:20px;}
        .login{width:400px; margin:0 auto;background:#EBEBEB; position:relative;}
        input{ width:230px; height:28px;margin:10px 0; line-height:28px;}
        .login .on_changes{width:232px;position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid#000; display:none; padding:10px;}
        .login .on_changes li{margin:8px;padding:4px;}
        .login .on_changes li.active{background:#CEE7FF;}
    </style>
</head>
<body>
<h1 class="tit-h1">jquery输入框邮箱下拉提示层</h1>
<div class="wrap">
    <script type="text/javascript">
        $(function(){
            $("#loginName").changeTips({
                divTip:".on_changes"
            });
        })
    </script>
    <div class="login">
    <div class="ln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" />
    </div>
    <ul class="on_changes" style="position: absolute; left: 78px; top:42px">
        <li email="">请选择邮箱类型</li>
            <li email=""></li>
        <li email="@sina.com"></li>
        <li email="@163.com"></li>
        <li email="@qq.com"></li>
        <li email="@139.com"></li>
        <li email="@hotmail.com"></li>
        <li email="@126.com"></li>
        <li email="@gmail.com"></li>
        <li email="@yahoo.com"></li>
    </ul>
    </div>
</div>
</body>

3.界面截图

---