Filtre jQuery Mobile

Éléments filtrables

Tout élément ayant un ou plusieurs éléments enfants peut être filtrable.

Comment créer un champ de recherche :

• L'élément que vous souhaitez filtrer doit utiliser l'attribut data-filter="true".
• Créez un élément <input> et spécifiez un id, puis ajoutez l'attribut data-type="search" à l'élément. Cela crée un champ de recherche de base. Placez l'élément <input> dans un formulaire et utilisez la classe "ui-filterable" sur l'élément <form> - cette classe ajuste les marges entre le champ de recherche et l'élément filtrable.
• Ajoutez ensuite l'attribut data-input à l'élément en cours de filtrage. La valeur doit être l'id de l'élément <input>.

Ensuite, créons une liste filtrable :

Astuce :Vous pouvez utiliser l'attribut placeholder dans le champ de recherche pour définir un texte d'indication :

Filtre personnalisé

Normalement, le texte inséré dans chaque élément de liste est utilisé comme texte de filtrage (par exemple, A correspond à « Adele » ou B correspond à « Billy »). Toutefois, si vous souhaitez spécifier un texte de filtrage personnalisé, vous devez utiliser l'attribut data-filtertext sur les éléments enfants :

	Si vous utilisez l'attribut data-filtertext sur un élément, le contenu textuel source de l'élément sera ignoré lors du filtrage. Dans ce cas, si vous souhaitez toujours trouver l'élément de liste « Adele », les mots-clés que vous devez utiliser sont : f, a, v ou fav.

Plus d’exemples

Comment filtrer une liste repliable.

Comment filtrer le contenu d'un tableau.

Comment filtrer les éléments <p> enfants contenus dans un élément <div>.