原生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模擬百度搜索框的小案例，后面會陸續整理一些簡單常見的小案例，也會記錄一下自己工作遇到的一些問題，第一次寫博，歡迎指正