tutorial pengembangan web terbaru
 

jQuery Mobile filter



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:

Contoh

<input id="myFilter" data-type="search" placeholder="Search for names.." >
Cobalah sendiri "

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:

Contoh

<li data-filtertext="fav" ><a href="#">Adele</a></li>
Cobalah sendiri "

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.