仿百度搜索框
阿新 • • 發佈：2021-08-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .content{ width:500px; margin:40px auto; } .search{ width: 400px; overflow: hidden; } .search input{ float: left; } #val{ height: 35px; width: 300px; padding-left: 10px; } #sub{ height: 40px; width: 80px; margin-left: 3px; font-size: 20px; } .show{ width: 302px; height: 300px; border: 1px solid #ccc; padding-left: 10px; display: none; } .show p{ font-size: 12px; } </style> </head> <body> <div class="content"> <div class="search"> <input type="text" id="val" placeholder="請輸入課程"> <input type="submit" id="sub"> </div> <div class="show" id="show"> <!-- <p>哈哈哈</p> <p>哈哈哈</p> --> </div> </div> <script> let arr = ['web前端精英特訓班 980元','HTML核心技術 199元','CSS核心技術 299元','Vue核心技術 599元','CSS+HTML核心技術 299元','web前端線上商城 99元','JavaScript核心技術 399元','JavaScript高階技術 899元']; // 邏輯：1.先完成 展示區域的顯示或隱藏 // let input = document.getElementById('val'); let show = document.getElementById('show'); input.onkeyup = function(){ show.style.display = 'block'; // input.value 和 arr的每一項進行匹配 indexOf() 匹配不到-1 let str = ''; arr.forEach((item)=>{ let res = item.indexOf(input.value); if(res !=-1){ str += '<p>'+item+'</p>'; } }) // console.log(str); // 如果input.value為空或者 str為false 給使用者一個提示 if(!input.value || !str){ show.innerHTML = '<p>暫無結果</p>' }else{ show.innerHTML = str; } } input.onblur = function(){ show.style.display = 'none'; input.value = ''; } </script> </body> </html>