การค้นหาด้วย Filter List ใช้ JavaScript ซ่อนแสดง List ก่อนจะแสดงผลรายการที่ตรงกับคำค้นหา

จากคำถามของสมาชิกเพจ To Be Developer ว่าจะทำยังไงให้รายการทั้งหมดซ่อนไว้ก่อน แล้วเมื่อค้นหาถึงจะแสดงรายการที่ตรงกันออกมา เพราะแบบเดิมเริ่มต้นจะแสดงทั้งหมดเลย

ซึ่งวิธีการที่ผมใช้ก็คือ คัดลอกซอร์สโค้ด JavaScript เดิมที่ใช้ค้นหา เอามาเฉพาะส่วนของการวนลูป for() จากนั้นก็สั่งให้ซ่อนเนื้อหาทั้งหมด โดยเก็บไว้ในฟังก์ชั่น resetList()

function resetList(){
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        li[i].style.display = "none";
    }
}

จากนั้นก็นำไปไว้ส่วนท้ายสุดของ JavaScript เพื่อเรียกใช้งานเมื่อหน้าเว็บโหลดจนสมบูรณ์เรียบร้อย ตำแหน่งที่ว่าก็คือ ก่อนปิดแท็ก </body> นั่นเอง

resetList();
</script>

</body>
</html>

เมื่อโหลดหน้าเว็บขึ้นมาก็จะพบว่ารายการทั้งหมดถูกซ่อนไว้เรียบร้อย

และเมื่อลองพิมพ์ข้อความค้นหาจะปรากฏข้อความที่ตรงกันแสดงขึ้นมาดังภาพ

แต่เมื่อลองลบข้อความค้นหาออกจนหมด ปรากฏว่าถูกเซ็ตให้แสดงทั้งหมดเลย ซึ่งจริงๆแล้ว ต้องซ่อนทั้งหมดไว้ก่อน จึงต้องแก้ไขฟังก์ชั่น myFunction() เพิ่มเติม

if(filter==''){
       resetList();
}else{
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

ก็คือ ตรวจสอบค่าว่างก่อนจะเริ่มเข้าสู่การวนลูปแสดงผลลัพธ์นั่นเอง ถ้าเป็นค่าว่างก็จัดการ resetList() เพื่อซ่อนรายการทั้งหมดก่อน

ดูวิดีโอตัวอย่างการใช้งานที่นี่

[JavaScript]

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container">
<h2>Filter List</h2>
<p>Search for a name in the input field.</p>

<input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">
<ul class="w3-ul w3-margin-top" id="myUL">
    <li>Adele</li>
    <li>Agnes</li>
    <li>Billy</li>
    <li>Bob</li>
    <li>Calvin</li>
    <li>Christina</li>
    <li>Cindy</li>
</ul>
</div>

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    if(filter==''){
       resetList();
    }else{
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
    }
}

function resetList(){
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        li[i].style.display = "none";
    }
}

resetList();
</script>

</body>
</html>

ที่มา : http://www.w3schools.com/w3css/w3css_filters.asp

PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ค้นหาบล็อกนี้