近期有個新入行的小夥伴一直在問一些基礎知識，突然覺得人的記憶力有限，有些平常很少用到的知識點雖簡單卻也其實很容易模糊，或者是一個單詞，或者是一個語法。所以想著應該利用一下工作之余的碎片時間，記錄一些工作上的問題和一些有趣的小案例，於是開通了播客，一方面便於自己日後翻閱，一方面給剛學習的小夥伴一個參考。

今天先寫一個簡單的小案例：原生JS模擬百度搜索框。

需求：

1.當在輸入框輸入時，每輸入一個文字，就會在下方展示相關內容列表

2.每一次輸入框輸入，清空上一次內容

3.鼠標移入列表內容時，對應的內容高亮顯示，移出時恢復原狀

4.鼠標點擊列表內容時，將列表內容顯示到文本框，並且列表清空

HTML頁面結構部分

1 <!-- 頁面就只是一個簡單文本框和按鈕，在文本框底部用一個ul列表來展示相關內容 -->
2 <div class="box">
3     <div class="top">
4         <input type="text" id="txt"/><input type="button" value="百度一下" id="search"/>
5     </div>
6     <ul id="keywords"></ul>
7 </div>

CSS樣式部分

 1 <style>
 
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6         body {
 7             font-size: 20px;
 8         }
 9         .box {
10             width: 600px;
11             height: 40px;
12             margin: 200px auto;  /*大盒子頁面居中 */
13             position: relative;
14         }
15
 
         .top{
16             width: 605px;
17             height: 40px;
18         }
19         #txt {
20             width: 490px;
21             height: 38px;
22             border: 1px solid #CCCCCC;
23             font-size: 18px;
24             float: left;
25             padding-left: 8px;
26             outline: none;  /* 去除文本框獲取焦點時的默認樣式 */
27         }
28         #txt:focus{
29             border: 1px solid #3385FF;            
30         }
31         #search {
32             width: 100px;
33             height: 40px;
34             float: left;
35             background-color: #3385FF;
36             color: white;
37             border: none;
38             font-size: 16px;
39         }
40         #keywords {
41             position: absolute;  /* ul相對父盒子定位 */
42             top: 40px;
43             left: 0;
44             border: 1px solid #CCCCCC;
45             border-top: none;
46             list-style: none;  /* 去除無序列表默認自帶的小圓點 */
47             width: 498px;
48             display: none;  /* 把ul隱藏起來，在獲得相關內容時再顯示出來，這樣在搜索之前，頁面只有一個搜索框和按鈕 */
49         }
50         li {
51             line-height: 24px;
52             font-size: 16px;
53             padding-left: 8px;
54         }
55     </style>

JS行為部分

 1 <script> 
 2     // 定義一個存儲相關內容的數組，模擬後臺獲取的數據，數組每個元素都是一個字符串
 3     var keywords = ["周傑倫", "周傑倫新專輯", "周傑倫等你下課", "陳奕迅", "陳奕迅演唱會", "陳奕迅歌手",
 4         "陳奕迅王菲","前端","前端開發","前端入門到放棄","前端要學什麽","周潤發","周潤發賭神","周潤發澳門風雲","周末雙休是國家規定嗎","super junior",
 5         "JavaScript","Java","super junior成員","super junior成員強仁","super junior成員金英雲","A short journey"];
 6 
 7     // 獲取文本框，按鈕和列表
 8     var txt=document.getElementById("txt");
 9     var search=document.getElementById("search");
10     var kw=document.getElementById("keywords");
11 
12     // 給文本框註冊一個鍵盤彈起事件，每按下一個按鍵彈起後，函數執行一遍
13     txt.onkeyup= function () {
14         kw.innerHTML="";  //每一次匹配數據前，先把列表清空，如果不清空會導致每一次獲取的內容都疊加顯示在列表上
15 
16         if(this.value){ //文本框裏有輸入內容時才進行數據匹配和顯示
17             for(var i=0;i<keywords.length;i++){  //遍歷數組裏的所有內容
18                 if(keywords[i].indexOf(this.value)!=-1){  //如果文本框輸入的字符或字符串能匹配到數組元素的字符串，就創建一個li標簽，把數組的這個元素當成li標簽的內容展示出來
19                     var li=document.createElement("li"); 
20                     li.innerHTML=keywords[i];
21                     kw.style.display="block";
22                     kw.appendChild(li); 
23                     
24                     //給新創建的每一個li標簽註冊一個鼠標移入和移出事件
25                     li.onmouseover= function () {
26                         this.defaultColor=this.style.backgroundColor; //定義一個defaultColor屬性來存儲li標簽本來的背景顏色
27                         this.style.backgroundColor="#F1F1F1";
28                     };
29 
30                     li.onmouseout= function () {
31                         this.style.backgroundColor=this.defaultColor;
32                     };
33                     // 給新創建的每一個li標簽註冊一個點擊事件
34                     li.onclick= function () {
35                         txt.value=this.innerHTML; //將點擊的列表內容顯示到文本框                    
36                     };
37                 }
38             }
39         }
40     };
41    // 給整個HTML註冊一個點擊事件，清空列表並將列表隱藏
42     document.documentElement.onclick= function () {
43         kw.innerHTML="";
44         kw.style.display="none";                                
45     }
46 </script>

運行效果：

這樣就完成了一個用原生JS模擬百度搜索框的小案例，後面會陸續整理一些簡單常見的小案例，也會記錄一下自己工作遇到的一些問題，第一次寫博，歡迎指正

原生JS模擬百度搜索框