原生JS模拟百度搜索框

近期有个新入行的小伙伴一直在问一些基础知识，突然觉得人的记忆力有限，有些平常很少用到的知识点虽简单却也其实很容易模糊，或者是一个单词，或者是一个语法。所以想着应该利用一下工作之余的碎片时间，记录一些工作上的问题和一些有趣的小案例，于是开通了播客，一方面便于自己日后翻阅，一方面给刚学习的小伙伴一个参考。

今天先写一个简单的小案例：原生JS模拟百度搜索框。

需求：

1.当在输入框输入时，每输入一个文字，就会在下方展示相关内容列表

2.每一次输入框输入，清空上一次内容

3.鼠标移入列表内容时，对应的内容高亮显示，移出时恢复原状

4.鼠标点击列表内容时，将列表内容显示到文本框，并且列表清空

HTML页面结构部分

<!-- 页面就只是一个简单文本框和按钮，在文本框底部用一个ul列表来展示相关内容 -->
<div class="box">
    <div class="top">
        <input type="text" id="txt"/><input type="button" value="百度一下" id="search"/>
    </div>
    <ul id="keywords"></ul>
</div>

CSS样式部分

<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 20px;
        }
        .box {
            width: 600px;
            height: 40px;
            margin: 200px auto;  /*大盒子页面居中 */
            position: relative;
        }
        .top{
            width: 605px;
            height: 40px;
        }
        #txt {
            width: 490px;
            height: 38px;
            border: 1px solid #CCCCCC;
            font-size: 18px;
            float: left;
            padding-left: 8px;
            outline: none;  /* 去除文本框获取焦点时的默认样式 */
        }
        #txt:focus{
            border: 1px solid #3385FF;            
        }
        #search {
            width: 100px;
            height: 40px;
            float: left;
            background-color: #3385FF;
            color: white;
            border: none;
            font-size: 16px;
        }
        #keywords {
            position: absolute;  /* ul相对父盒子定位 */
            top: 40px;
            left: 0;
            border: 1px solid #CCCCCC;
            border-top: none;
            list-style: none;  /* 去除无序列表默认自带的小圆点 */
            width: 498px;
            display: none;  /* 把ul隐藏起来，在获得相关内容时再显示出来，这样在搜索之前，页面只有一个搜索框和按钮 */
        }
        li {
            line-height: 24px;
            font-size: 16px;
            padding-left: 8px;
        }
    </style>

JS行为部分

<script> 
    // 定义一个存储相关内容的数组，模拟后台获取的数据，数组每个元素都是一个字符串
    var keywords = ["周杰伦", "周杰伦新专辑", "周杰伦等你下课", "陈奕迅", "陈奕迅演唱会", "陈奕迅歌手",
        "陈奕迅王菲","前端","前端开发","前端入门到放弃","前端要学什么","周润发","周润发赌神","周润发澳门风云","周末双休是国家规定吗","super junior",
        "JavaScript","Java","super junior成员","super junior成员强仁","super junior成员金英云","A short journey"];

    // 获取文本框，按钮和列表
    var txt=document.getElementById("txt");
    var search=document.getElementById("search");
    var kw=document.getElementById("keywords");

    // 给文本框注册一个键盘弹起事件，每按下一个按键弹起后，函数执行一遍
    txt.onkeyup= function () {
        kw.innerHTML="";  //每一次匹配数据前，先把列表清空，如果不清空会导致每一次获取的内容都叠加显示在列表上

        if(this.value){ //文本框里有输入内容时才进行数据匹配和显示
            for(var i=0;i<keywords.length;i++){  //遍历数组里的所有内容
                if(keywords[i].indexOf(this.value)!=-1){  //如果文本框输入的字符或字符串能匹配到数组元素的字符串，就创建一个li标签，把数组的这个元素当成li标签的内容展示出来
                    var li=document.createElement("li"); 
                    li.innerHTML=keywords[i];
                    kw.style.display="block";
                    kw.appendChild(li); 
                    
                    //给新创建的每一个li标签注册一个鼠标移入和移出事件
                    li.onmouseover= function () {
                        this.defaultColor=this.style.backgroundColor; //定义一个defaultColor属性来存储li标签本来的背景颜色
                        this.style.backgroundColor="#F1F1F1";
                    };

                    li.onmouseout= function () {
                        this.style.backgroundColor=this.defaultColor;
                    };
                    // 给新创建的每一个li标签注册一个点击事件
                    li.onclick= function () {
                        txt.value=this.innerHTML; //将点击的列表内容显示到文本框                    
                    };
                }
            }
        }
    };
   // 给整个HTML注册一个点击事件，清空列表并将列表隐藏
    document.documentElement.onclick= function () {
        kw.innerHTML="";
        kw.style.display="none";                                
    }
</script>

运行效果：

这样就完成了一个用原生JS模拟百度搜索框的小案例，后面会陆续整理一些简单常见的小案例，也会记录一下自己工作遇到的一些问题，第一次写博，欢迎指正