## 搜索框 ``` <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> <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> ``` 效果圖：