模擬搜尋框
阿新 • • 發佈：2021-01-25
搜尋框的製作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>搜尋框</title> <style type="text/css"> .one{ margin: 0px auto; padding: 0px 0px; width: 225px; } .one1{ margin: 2px auto; padding: 0px 0px; width: 225px; height: auto; border: 1px solid gainsboro; display: none; } p{ margin: 0 0; padding: 0 0; } </style> </head> <body> <div class="one"> <div id=""> <input type="text" id="val" placeholder="請輸入內容"/> <input type="submit" value="搜尋" id="sub"/> </div> <div class="one1" id="show"></div> </div> <script> let arr = ['資料庫 299元','計算機網路 199元','計算機組成原理 300元', 'java實踐課程 500元','大學英語 150元','軟體工程 230元','web前端 150元', 'ps實踐與理論 139元','java ee企業級框架 459元','框架技術 249元']; //邏輯：1.展示區域的顯示與隱藏 let inpu = document.getElementById('val'); let show = document.getElementById('show'); inpu.onkeyup = function(){ show.style.display = 'block';//隱藏 //input.value 和資料進行比較，並將得到的結果放到str中 let str =''; arr.forEach((item)=>{ let res = item.indexOf(inpu.value); if (res !=-1) { //拼接在p標籤裡面 str += '<p>'+item+'<p>' } }) //判斷，匹配結果為空或者不存在，給出提示，沒有判斷，當輸入框為空時顯示全部資料 if(!inpu.value || !str){ show.innerHTML='<p>您輸入的內容不存在<p>' }else{ show.innerHTML = str; } } inpu.onblur = function(){ show.style.display = 'none'; inpu.value = ''; } </script> </body> </html>
執行結果：
喜歡的朋友請點贊＋關注，謝謝！！！