jQuery Mobile Filter

Berikutnya: jQuery Mobile pagecontainerbeforeload acara

Anda dapat menyaring elemen

Semua elemen jika satu atau lebih sub-elemen dapat disaring.

Cara membuat kolom pencarian:

Anda ingin menyaring elemen harus menggunakan data-filter = "true" atribut.
Buat <input> elemen dan menentukan id, ditambah data jenis pada elemen = "search" atribut. Ini akan membuat kolom pencarian dasar. <Input> elemen ditempatkan dalam bentuk, bentuk <form> elemen menggunakan kelas "ui-disaring" - Kelas ini akan disesuaikan luar kolom pencarian dan jauh dari elemen filter.
Kemudian tambahkan atribut data masukan untuk elemen filter. Nilai ini perlu id <input> elemen.

Selanjutnya kita membuat daftar disaring:

elemen pencarian daftar

<Form class = "ui-disaring ">
<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>

Coba »

Tip: Anda dapat menggunakan atribut placeholder dalam kolom pencarian untuk mengatur pesan:

contoh

Coba »

filter kustom

Umumnya dimasukkan ke dalam teks setiap daftar item untuk digunakan sebagai teks filter (seperti A yang terkait dengan "Adele" atau "B" sesuai dengan "Billy"). Tetapi jika Anda ingin menentukan filter teks kustom, Anda perlu menggunakan data atribut-filtertext di elemen anak:

contoh

<Li Data-filtertext = "fav "> <a href="#"> Adele </a> </ li>

Coba »

	Jika Anda menggunakan data atribut-filtertext dalam elemen, elemen konten teks sumber akan diabaikan ketika filter, maka jika Anda harus mencari daftar item "Adele", memerlukan penggunaan kata kunci: f, a, v, atau fav.