百度搜索输入，出推荐搜索条

图片.png

在输入框中输入字词，通过在数据中查找相关字词，下面弹出相关搜索

html部分

`<div class="search" id="search">
    <input type="text" title="" id="txt" class="txt"><!-- 换行之间会有大概3像素 用font-size：0 -->
    <a href="javascript:;" class="btn">百度一下</a>
</div>

css部分

`*{
        margin: 0;
        padding: 0;
    }
    .search{
        width:420px;
        height:42px;
        font-size: 0px;/* 为了消除换行带来的那几像素 */
        margin: 150px auto;
    }
    .search .txt{
        width: 338px;
        height: 40px;
        border: 1px solid #ccc;
        line-height: 42px;
        padding: 0px 5px;
        color: #282828;
        font-size: 14px;
    }
    .search .btn{
        display: inline-block;
        width: 70px;
        height: 42px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        color: #fff;
        line-height: 42px;
        background: skyblue;
    }

js部分

` function my$(id){
        return document.getElementById(id)
    }
    //创建数据
    var data=['想开学','啥时候开学','宿舍费能退吗','期末考试咋考','在家宅','在家上网课','在家被嫌弃']

    my$('txt').onkeyup=function(){
        //有则删除，无则创建（否则后面会创建很多li
        if(my$('dv')){
            my$('search').removeChild(my$('dv'))
        }
        var valueTxt=this.value//获取value值
        var arr=[]//临时声明一个空数组来存储匹配的数据
        for(var i=0;i<data.length;i++){  //比对value值与data中的每一条数据
            if(data[i].indexOf(valueTxt)!=-1){//如果要检索的字符串值没有出现，则该方法返回 -1。
                arr.push(data[i])
            }
        }
        
        //在创建li前 先判断是否匹配到
        if(valueTxt==''||arr.length===0){
            return
        }

        //根据创建的数据来创建div ul li
        var div=document.createElement('div')
        div.id='dv'
        var ul=document.createElement('ul')

        //给其添加样式
        div.style.width='348px'
        div.style.border='1px solid #ccc'
        div.style.marginTop='-1px'
        ul.style.listStyle='none'

        for(var i=0;i<arr.length;i++){
            var li=document.createElement('li')
            li.style.fontSize='14px'
            li.style.padding='5px'

            li.innerHTML=arr[i]
            ul.appendChild(li)//li放入ul中
        }
        div.appendChild(ul)
        my$('search').appendChild(div)
    }