home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีสร้างเมนูค้นหาเพื่อกรองลิงก์ด้วย JavaScript

ตัวอย่างนี้แสดงวิธีสร้างระบบค้นหาแบบ Real-time ที่กรองรายการลิงก์ในเมนูด้านซ้าย โดยใช้ JavaScript แบบ Vanilla (ไม่ต้องใช้ Library) เหมาะสำหรับ Sidebar เมนูที่มีรายการมาก

ตัวอย่างโค้ด

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body {    font-family: monospace; } .outer {    display: flex; } h2 {    text-align: center; } .menu-left {    flex: 35%;    padding: 15px 0; } .menu-left h2 {    padding-left: 8px; } .resultSide {    flex: 55%;    padding: 15px;    background-color: rgb(199, 199, 255); } .resultSide p {    font-size: 25px; } .searchBox {    font-size: 16px;    padding: 11px;    border: 2px solid black; } .animalMenu {    list-style-type: none;    margin: 0px;    background-color: lightgoldenrodyellow; } .animalMenu li a {    padding: 12px;    text-decoration: none;    color: black;    display: block; } li {    font-size: 25px; } .animalMenu li a:hover {    background-color: rgb(255, 112, 112); } </style> </head> <body> <h2>Search Animals</h2> <div class="outer"> <div class="menu-left"> <h2 style="background-color: lightgoldenrodyellow;">Menu</h2> <input type="text" maxlength="20" size="20" class="searchBox" placeholder="Search about animal...." /> <ul class="animalMenu"> <li><a href="#">Lion</a></li> <li><a href="#">Giraffe</a></li> <li><a href="#">Camel</a></li> <li><a href="#">Tiger</a></li> <li><a href="#">Cat</a></li> </ul> </div> <div class="resultSide"> <h2>Page Header</h2> <p>Some random text inside this box to demonstrate the example code</p> <p>Some random text inside this box to demonstrate the example code</p> </div> </div> <script>    let searchBox = document.querySelector(".searchBox");    let filterSearch, ulItem, liItem, links;    function processResults() {       filterSearch = searchBox.value.toUpperCase();       ulItem = document.querySelector(".animalMenu");       liItem = ulItem.getElementsByTagName("li");       Array.from(liItem).forEach(element => {          links = element.getElementsByTagName("a")[0];          if (links.innerHTML.toUpperCase().indexOf(filterSearch) > -1) {             element.style.display = "";          } else {             element.style.display = "none";          }       });    }    searchBox.addEventListener("keyup", () => {       processResults();    }); </script> </body> </html>

การทำงานของ JavaScript

  1. เลือก element .searchBox และเตรียมตัวแปร
  2. ฟังก์ชัน processResults() จะรันทุกครั้งที่พิมพ์ (event keyup)
  3. ดึงค่าที่พิมพ์ แปลงเป็นตัวพิมพ์ใหญ่ (toUpperCase())
  4. วนลูปเช็คแต่ละ <li> ว่าข้อความใน <a> มีคำค้นหาหรือไม่
  5. ถ้ามี -> แสดง (display: "") ถ้าไม่มี -> ซ่อน (display: "none")

ผลลัพธ์

พิมพ์ในกล่องค้นหา -> รายการสัตว์จะถูกกรองทันที แสดงเฉพาะที่ตรงกับคำค้นหา