éléments filtrables
Tous les éléments qui ont plus d'un élément enfant, peuvent être filtrés.
Comment faire pour créer un champ de recherche:
- L'élément que vous voulez être filtrables, doit inclure les data-filter="true" attribut.
- Créer un <input> élément avec un id spécifié et ajoutez le data-type="search" attribut. Cela va créer un champ de recherche de base. Enroulez le <input> dans un formulaire, et ajoutez le "ui-filterable" classe à la balise <form> élément - cela va régler la marge entre le champ de recherche et l'élément filtrables.
- Ensuite, ajoutez l' data-input de data-input attribut à l'élément filtrables. Sa valeur doit correspondre à l'ID de la <input> élément.
Ci-dessous, nous avons créé une vue de liste filtrables:
Rechercher des éléments d'une liste
<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> Essayez - le vous - même » Astuce: Utilisez un espace réservé pour spécifier une courte pointe qui décrit la valeur attendue du champ de recherche:
Exemple
<input
id="myFilter" data-type="search" placeholder="Search
for names.." >
Essayez - le vous - même » Filtre personnalisé
Le texte à l' intérieur de chaque élément enfant est le texte même qui est utilisé pour le filtrage (comme "Adele" ou "B" pour "Billy" ). Toutefois, si vous souhaitez filtrer la recherche d'un texte de filtre personnalisé à la place, vous pouvez ajouter l'attribut data-critère de recherche à tout élément enfant:
Si vous utilisez le data-filtertext de "Adele" data-filtertext attribut sur un élément, l'original text / contenu de cet élément particulier est ignoré pour le filtrage (Dans l'exemple ci - dessus, vous n'êtes plus en mesure de rechercher l'élément de liste "Adele" . Vous ne pouvez trouver Adele en tapant les mots - clés "f, a, v ou fav ".)
Autres exemples
Listes de filtres pliables
Comment filtrer un ensemble pliable de listes.
Filtrer les tableaux
Comment filtrer une table.
Filtre <div> éléments
Comment filtrer un <div> élément contenant enfant <p> éléments.