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>

运行结果如下: