Elemen disaring
Semua elemen yang memiliki lebih dari satu elemen anak, dapat disaring.
Cara Membuat Bidang Cari:
- Unsur Anda ingin menjadi disaring, harus menyertakan data-filter="true" atribut.
- Buat <input> elemen dengan id tertentu dan menambahkan data-type="search" atribut. Ini akan membuat kolom pencarian dasar. Bungkus <input> dalam bentuk, dan menambahkan "ui-filterable" kelas ke <form> elemen - ini akan menyesuaikan margin antara kolom pencarian dan elemen disaring.
- Kemudian, tambahkan data-input atribut untuk elemen disaring. Nilainya harus sesuai dengan id dari <input> elemen.
Di bawah ini, kami telah membuat tampilan daftar disaring:
Cari elemen dalam daftar
<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> Cobalah sendiri " Tip: Gunakan placeholder untuk menentukan petunjuk singkat yang menggambarkan nilai yang diharapkan dari kolom pencarian:
kustom Filter
Teks di dalam setiap elemen anak adalah teks yang sebenarnya yang digunakan untuk filtering (seperti "Adele" atau "B" untuk "Billy" ). Namun, jika Anda ingin menyaring pencarian ke teks filter kustom sebagai gantinya, Anda dapat menambahkan data atribut-filtertext untuk setiap elemen anak:
Jika Anda menggunakan data-filtertext atribut pada elemen, asli teks / konten dari elemen tertentu diabaikan untuk filtering (Pada contoh di atas, Anda tidak lagi dapat mencari item daftar "Adele" . Anda hanya dapat menemukan Adele dengan mengetikkan kata kunci "f, a, v atau fav ".)
Contoh lebih
Saring Daftar dilipat
Bagaimana untuk menyaring satu set dilipat dari daftar.
Filter Tabel
Bagaimana untuk menyaring meja.
Filter <div> elemen
Bagaimana untuk menyaring <div> elemen mengandung anak <p> elemen.