javascript实例学习之三——类新浪微博的登录框

该登录框和百度的搜索框类似，可以实现如下效果:

1.文字输入时自动弹出提示层

2，提示层根据输入文字进行自动过滤

3，提示层可以使用上下按键进行选择

4,提示层可以点击或者回车来确认输入

微博登录框html代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>微博登录框效果</title>
    <style>
        *,*:before,*:after{box-sizing:border-box;}
        div{300px;margin:50px auto;position:relative;}
        div input{100%;height:25px;line-height: 25px;margin:5px 0;}
        ul{300px;list-style: none; margin:0; padding: 0;position:absolute; top:40px; left:0; border:1px solid #ccc; background:#fff;display: none;}
        ul li{100%;padding: 3px 5px ;cursor:pointer;}
        ul li.active{background: rgb(232,244,252);color:rgb(153,153,153);}
    </style>
</head>
<body>
    <div id="login">
        <input type="text" placeholder="邮箱/会员账号/手机号" id="username">
        <input type="text" placeholder="请输入密码">
        <ul id="suggest">
            <li class="note">请选择邮箱类型</li>
            <li email="" class="active"></li>
            <li email="@sina.com" class="item">@sina.com</li>
            <li email="@163.com" class="item">@163.com</li>
            <li email="@qq.com" class="item">@qq.com</li>
            <li email="@126.com" class="item">@126.com</li>
            <li email="@vip.sina.com" class="item">@vip.sina.com</li>
            <li email="@sina.cn" class="item">@sina.cn</li>
            <li email="@hotmail.com" class="item">@hotmail.com</li>
            <li email="@gmail.com" class="item">@gmail.com</li>
            <li email="@sohu.com" class="item">@sohu.com</li>
            <li email="@yahoo.com" class="item">@yahoo.com</li>
            <li email="@139.com" class="item">@139.com</li>
            <li email="@wo.com.cn" class="item">@wo.com.cn</li>
            <li email="@189.cn" class="item">@189.com</li>
        </ul>
    </div>
    <script src="js/weiboLogin.js"></script>
</body>
</html>

微博登录框html代码

微博登录框javascript代码

document.addEventListener('DOMContentLoaded', function() {
    var s1 = new Suggest();
    s1.init();
}, false);

function Suggest() {
    //提示框对应的输入框
    this.oMenu = document.getElementById('username');
    //提示框对应的提示层    
    this.oContent=document.getElementById('');
    this.oUl = document.getElementById('suggest');
    this.aLis = this.oUl.getElementsByTagName('li');

}
  
Suggest.prototype = {
    constructor: Suggest,
    init: function() {

        var that = this;
        var iNow = 1;
        
        this.oInput.addEventListener('input', function() {
            //效果1：文本框输入的时候，提示框显示
            that.showUl();
            //效果3：提示框自动补充邮箱后缀，并在用户输入@之后，自动进行过滤
            that.changeUl();
            that.sel(iNow);
        }, false);
        //效果2：失去焦点的时候，提示框隐藏
        this.oInput.addEventListener('blur', function() {
            that.hideUl();
        }, false);
        // 
        //效果4，点击对应的提示项，文本框的内容随之改变，同时提示框消失

        for (var i = 1; i < this.aLis.length; i++) {
            this.aLis[i].index = i;
            this.aLis[i].addEventListener('mouseover', function() {
                that.sel(this.index);
                iNow = this.index;
            }, false);
            this.aLis[i].addEventListener('mousedown',function(){
                that.oInput.value=this.innerHTML;
            },false);
        }

        //效果5：上下键盘可以切换提示选中项
        //效果6：当按下回车键时，文本框内容随之改变，同时提示框消失
        //焦点在哪个控件上，就给哪个控件添加处理时间
        this.oInput.addEventListener('keydown', function(e) {
            var event = e || window.event;
            var code = event.charCode || event.keyCode;
            if (code == 38) { //向上
                iNow--;
                if (iNow == 0) {
                    iNow = that.aLis.length - 1;
                }
            } else if (code == 40) {
                iNow++;
                if (iNow == that.aLis.length ) {
                    iNow = 1;
                }
            }
            that.sel(iNow);
            //如果按下的是回车键
            if(code==13){
                that.oInput.value=that.aLis[iNow].innerHTML;
                that.oInput.blur();
            }
        }, false);
        

        

    },
    showUl: function() {
        this.oUl.style.display = 'block';
        for (var i = 0; i < this.aLis.length; i++) {
            this.aLis[i].style.display = 'block';
            this.aLis[i].className = '';
        }
    },
    hideUl: function() {
        this.oUl.style.display = 'none';
    },
    changeUl: function() {
        var value = this.oInput.value;
        var suffix = value.substring(value.indexOf('@') + 1);
        var reg = new RegExp('@' + suffix);
        var match = reg.test(value);

        for (var i = 1, len = this.aLis.length; i < len; i++) {
            var emailText = this.aLis[i].getAttribute('email');
            //分为两种情况，输入内容包含@，以及输入内容不包含@
            if (match) {
                //说明输入内容包含@
                //根据输入的后缀进行过滤，只显示匹配的邮箱
                if (reg.test(emailText)) {
                    this.aLis[i].innerHTML = value.substring(0, value.indexOf('@')) + emailText;
                } else {
                    this.aLis[i].style.display = 'none';
                }

            } else {
                //说明输入内容不包含@
                this.aLis[i].innerHTML = value + emailText;
            }

        }
    },
    sel: function(iNow) {
        for (var i = 1; i < this.aLis.length; i++) {
            this.aLis[i].className = '';
        }
        if (this.oInput.value) {
            this.aLis[iNow].className = 'active';
        }
    },

};

微博登录框javascript代码