圖片.png

在輸入框中輸入字詞，通過在數(shù)據(jù)中查找相關(guān)字詞，下面彈出相關(guān)搜索

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)
    }
    //創(chuàng)建數(shù)據(jù)
    var data=['想開學(xué)','啥時候開學(xué)','宿舍費能退嗎','期末考試咋考','在家宅','在家上網(wǎng)課','在家被嫌棄']

    my$('txt').onkeyup=function(){
        //有則刪除，無則創(chuàng)建（否則后面會創(chuàng)建很多l(xiāng)i
        if(my$('dv')){
            my$('search').removeChild(my$('dv'))
        }
        var valueTxt=this.value//獲取value值
        var arr=[]//臨時聲明一個空數(shù)組來存儲匹配的數(shù)據(jù)
        for(var i=0;i<data.length;i++){  //比對value值與data中的每一條數(shù)據(jù)
            if(data[i].indexOf(valueTxt)!=-1){//如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。
                arr.push(data[i])
            }
        }
        
        //在創(chuàng)建li前 先判斷是否匹配到
        if(valueTxt==''||arr.length===0){
            return
        }

        //根據(jù)創(chuàng)建的數(shù)據(jù)來創(chuàng)建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)
    }