Elemente filterable
Toate elementele care au mai mult de un element copil, poate fi filtrat.
Cum Pentru a crea un câmp de căutare:
- Elementul pe care doriți să fie filtrabil, trebuie să includă data-filter="true" atribut.
- Crearea unui <input> elementul cu ID - ul specificat și adăugați data-type="search" de data-type="search" atribut. Acest lucru va crea un câmp de căutare de bază. Înfășurați <input> într - o formă, și se adaugă "ui-filterable" clasa de la <form> Elementul - acest lucru se va ajusta marja dintre câmpul de căutare și elementul filtrabil.
- Apoi, adăugați data-input de data-input atribut la elementul filtrabil. Valoarea sa trebuie să se potrivească cu id - ul <input> element.
Mai jos, am creat o vizualizare listă filtrabil:
Caută elemente într-o listă
<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> Încearcă - l singur » Sfat: Folosiți un înlocuitor pentru a specifica un indiciu scurt , care descrie valoarea așteptată a câmpului de căutare:
Exemplu
<input
id="myFilter" data-type="search" placeholder="Search
for names.." >
Încearcă - l singur » Filtru personalizat
Textul din interiorul fiecărui element de copil este textul propriu - zis , care este utilizat pentru filtrarea (cum ar fi "Adele" sau "B" pentru "Billy" ). Cu toate acestea, dacă doriți să filtrați căutarea unui text filtru personalizat în schimb, puteți adăuga data-filtertext atributul oricărui element de copil:
Dacă utilizați data-filtertext atributul pe un element, textul / conținutul original al acelui element special este ignorat pentru filtrare (în exemplul de mai sus, nu mai puteți să căutați elementul lista de "Adele" . Puteți găsi doar Adele prin tastarea cuvinte cheie "f, a, v sau fav ".)
Mai multe exemple
Filtru Liste pliabile
Cum de a filtra un set pliabil de liste.
Tabele de filtrare
Cum de a filtra un tabel.
Se filtrează <div> elemente
Cum de a filtra un <div> elementul care conține copii <p> elemente.