ตัวอย่างการ search แล้ว filter ข้อมูลที่ต้องการ โดยใช้ Alpine.js

ตัวอย่างการ search แล้ว filter ข้อมูลที่ต้องการ โดยใช้ Alpine.js

เราไปดูวิธีการ search แล้ว filter ข้อมูลกันครับ ไปดูตัวอย่างโค้ดกันเลย

<div
    x-data="{
        search: '',
 
        items: ['foo', 'bar', 'baz'],
 
        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }"
>
    <input x-model="search" placeholder="Search...">
 
    <ul>
        <template x-for="item in filteredItems" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

จากโค้ด เราจะกำหนด x-data โดยมี

• search ไว้สำหรับกรอกข้อมูลที่ค้นหา
• items เป็นข้อมูล array ทั้งหมด
• filteredItems เป็นฟังก์ชันสำหรับค้นหาข้อมูลตามการ search

เรามี input โดยเราจะใช้ x-model กับตัวแปร search เพื่อ map value input กับตัวแปร search จากนั้นเราก็มี template เพื่อสำหรับ loop ข้อมุล โดยเราจะ loop ข้อมูลตามฟังก์ชัน filteredItems แล้วทำการแสดงข้อมูล