องค์ประกอบที่กรองได้
องค์ประกอบทั้งหมดที่มีองค์ประกอบของเด็กมากกว่าหนึ่งสามารถกรอง
วิธีการสร้างเขตการค้นหา:
- องค์ประกอบที่คุณต้องการที่จะกรองได้, ต้องมี data-filter="true" แอตทริบิวต์
- สร้าง <input> องค์ประกอบที่มี ID ที่ระบุและเพิ่ม data-type="search" แอตทริบิวต์ นี้จะสร้างช่องค้นหาขั้นพื้นฐาน ห่อ <input> ในรูปแบบและเพิ่ม "ui-filterable" ชั้นไป <form> องค์ประกอบ - นี้จะปรับส่วนต่างระหว่างช่องค้นหาและองค์ประกอบกรอง
- จากนั้นให้เพิ่ม data-input แอตทริบิวต์องค์ประกอบกรอง ค่าของมันจะต้องตรงกับ ID ของ <input> องค์ประกอบ
ด้านล่างนี้เราได้สร้างมุมมองรายการกรอง:
ค้นหาสำหรับองค์ประกอบในรายการ
<form class="ui-filterable">
<input id="myFilter"
data-type="search">
</form>
<ul data-role="listview"
data-filter="true" data-input="#myFilter" >
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul> ลองตัวเอง» เคล็ดลับ: ใช้ตัวยึดเพื่อระบุคำแนะนำสั้น ๆ ที่อธิบายถึงค่าที่คาดหวังของช่องค้นหา:
กรองแบบกำหนดเอง
ข้อความในแต่ละองค์ประกอบของเด็กเป็นข้อความจริงที่ถูกนำมาใช้สำหรับการกรอง (เช่น "Adele" หรือ "B" สำหรับ "Billy" ) แต่ถ้าคุณต้องการกรองค้นหาเพื่อข้อความกรองที่กำหนดเอง แต่คุณสามารถเพิ่มแอตทริบิวต์ข้อมูล filtertext องค์ประกอบเด็ก ๆ :
ถ้าคุณใช้ data-filtertext แอตทริบิวต์ในองค์ประกอบเดิมข้อความ / เนื้อหาขององค์ประกอบที่โดยเฉพาะอย่างยิ่งจะถูกละเว้นสำหรับการกรอง (ในตัวอย่างข้างต้นคุณจะไม่สามารถที่จะค้นหารายการรายการ "Adele" . คุณสามารถหา Adele โดยการพิมพ์คำหลัก "f, a, v หรือ fav ".)
ตัวอย่างเพิ่มเติม
กรองรายการยุบ
วิธีการกรองชุดพับของรายการ
ตารางกรอง
วิธีการกรองตาราง
กรอง <div> องค์ประกอบ
วิธีการกรอง <div> องค์ประกอบที่มีเด็ก <p> องค์ประกอบ