เพื่อสร้าง Filter List ด้วย JavaScript โค้ดมีดังนี้
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } .searchInput { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 2px solid grey; margin-bottom: 12px; } .animalUL { list-style-type: none; padding: 0; margin: 0; } .animalUL li a { border-top: 1px solid rgb(0, 0, 0); margin-top: -1px; background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block; } .animalUL li a:hover:not(.header) { background-color: #eee; } </style> </head> <body> <h1>Filter list example</h1> <input type="text" class="searchInput" onkeyup="filterFunction()" placeholder="Search for animals" title="Type in a name"/> <ul class="animalUL"> <li><a href="#">Cat</a></li> <li><a href="#">Cheetah</a></li> <li><a href="#">Dog</a></li> <li><a href="#">Giraffe</a></li> <li><a href="#">Lion</a></li> <li><a href="#">Leopard</a></li> <li><a href="#">llama</a></li> </ul> <script> function filterFunction() { var input, filter, ul, li, a, i, value; input = document.querySelector(".searchInput"); filter = input.value.toUpperCase(); ul = document.querySelector(".animalUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; value = a.textContent || a.innerText; if (value.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html>ผลลัพธ์
โค้ดข้างต้นจะสร้างผลลัพธ์ดังนี้
เมื่อพิมพ์ในช่องค้นหา
