Js之模拟百度搜索框

在这里我们只是简单的用数组模拟了一下数据库中的数据

html代码如下:

<div class="box" id="box">
       <input type="text" name="content" class="content" id="txt"/>
       <button>搜索</button>
       <!--<div class="pop" id="pop">
           <ul>
               <li>a</li>
               <li>aaa</li>
               <li>aaaa</li>
           </ul>
        </div>-->
</div>

css样式:

<style>
    .box{
        width: 650px;
        height: 400px;
        /*border: 1px solid gray;*/
        margin:100px auto;
    }

    .content{
        width: 486px;
        height: 30px;
        float: left;
        padding-left:10px;
    }

    button{
        width: 80px;
        height: 35px;
        float: left;
        margin-left:20px;
        font-size:18px;
    }

    #pop{
        margin-top:0;
        width: 498px;
        height: 300px;
        border: 1px solid gray;
        border-top:0;
        float: left;
    }

    ul{
        list-style: none;
        margin:0;
        padding:0;
    }

    ul li{
        margin-left:10px;
        margin-top:10px;
        cursor: pointer;
        height: 30px;
        line-height:30px;
    }

    ul li:hover{
        background-color: gray;
    }
</style>

js代码如下:

<script>
    //获取输入框
    var txt = document.getElementById("txt");
    var arr = ["今晚吃鸡","泪点","画画","evan","evan_qb","evanevan"];
    var box = document.getElementById("box");

    //输入文字
    txt.onkeyup = function(){
        //判断当前值是否是已经存储数据的开头
        var arr2 = [];
        for(var i = 0;i<arr.length;i++){
            if (arr[i].indexOf(this.value) === 0){
                arr2.push(arr[i]);
            }
        }
        //获取pop
        var pop = document.getElementById("pop");

        //如果输入的值为空
        if(this.value.length === 0){
            if (pop){
                box.removeChild(pop);
            }
            return;
        }

        //不满足的情况
        // 如果已经存在则先删除
        if (pop){
            box.removeChild(pop);
        }

        //如果arr2的长度为0
        if(arr2.length === 0){
            return;
        }

        //创建盒子
        var div = document.createElement("div");
        div.id = "pop";
//        div.className = "pop";
        box.appendChild(div);

        //创建ul
        var ul = document.createElement("ul");
        div.appendChild(ul);
        //将数组arr2的数据显示出来
        for (var i = 0;i<arr2.length;i++){
            var li = document.createElement("li");
            li.innerHTML = arr2[i];
            ul.appendChild(li);
        }


    }

    txt.onblur = function(){
        box.removeChild(pop);
    }
</script>

运行结果如下: