原生JS模擬百度搜索框
阿新 • • 發佈:2018-07-25
相關 class img mouse reat type 歌手 bubuko value
近期有個新入行的小夥伴一直在問一些基礎知識,突然覺得人的記憶力有限,有些平常很少用到的知識點雖簡單卻也其實很容易模糊,或者是一個單詞,或者是一個語法。所以想著應該利用一下工作之余的碎片時間,記錄一些工作上的問題和一些有趣的小案例,於是開通了播客,一方面便於自己日後翻閱,一方面給剛學習的小夥伴一個參考。
今天先寫一個簡單的小案例:原生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模擬百度搜索框