使用原生js实现邮箱模糊查询的效果

写的比较粗糙，还有很多改进的地方，先用来记录一下

html:

<div class="box">
        <input type="text" placeholder="网易邮箱/常用邮箱" id="text">
        <button id="clearBtn">清空</button>
        <ul></ul>
</div>

css:

<style>
        *{margin: 0;padding: 0;list-style: none;}
        .box{margin: 20px auto;width: 400px;}
        ul{width: 171px;border: 1px solid #ccc;display: none;}
        ul li{line-height: 25px;cursor: pointer;}
</style>

js:

var text = document.getElementById('text');
        var ul = document.querySelector('ul');        
        var clearBtn = document.getElementById('clearBtn');    
        var arr = ['@163.com', '@126.com', '@qq.com', '@yeah.net', '@188.com', '@vip.163.com', '@vip.126.com'];
        var num = -1;    

        // 清空input值和下拉列表的内容
        clearBtn.onclick = function(){
            text.value = '';
            ul.innerHTML = '';
        }
        // 鼠标聚焦清空input框的值
        text.onfocus = function(){
            this.value = '';
        }
        // 鼠标释放事件
        text.onkeyup = function(e){
            var val = this.value;
            var index = val.indexOf('@');
            var prevstr = '';
            var nextstr = '';
            var str = '';    
                
            if(val == ''){
                ul.style.display = 'none';
            } else {
                if(index == -1){
                    prevstr = val;
                    nextstr = '';
                } else {
                    prevstr = val.slice(0, index);
                    nextstr = val.slice(index+1);
                }
                for (var i in arr) {
                    if(arr[i].indexOf(nextstr) != -1){
                        str+= '<li>'+prevstr+arr[i]+'</li>'
                    }
                }
                ul.style.display = 'block';
                ul.innerHTML = str;
            }    
            // 鼠标滑过li改变背景色，点击把值赋给input框
            var lis = ul.querySelectorAll('li');
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function(){
                    this.style.background = '#ccc';
                }
                lis[i].onmouseout = function(){
                    this.style.background = '';
                }
                lis[i].onclick = function(){
                    text.value = this.innerHTML;
                    ul.style.display = 'none';
                    num = -1;
                }
            }    
            // 键盘事件
            var event = e || window.event;            
            if(event.keyCode == 40){                
                num++;
                if(num > lis.length-1) num = 0;                
                changBg(num);
            } else if(event.keyCode == 38){
                num--;
                if(num < 0) num = lis.length-1;
                changBg(num);
            } else if(event.keyCode == 13){
                text.value = lis[num].innerHTML;
                ul.style.display = 'none';
                num = -1;
            }
            // 设置背景色
            function changBg(ind){
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.background = '';
                }
                lis[ind].style.background = '#ccc';
            }
        }

效果：