Filtre jQuery Mobile

Suivant: événement pagecontainerbeforeload jQuery Mobile

Vous pouvez filtrer élément

Tous les éléments, si un ou plusieurs sous-éléments peuvent être filtrés.

Comment créer un champ de recherche:

Vous souhaitez filtrer élément doit utiliser les données-filter = "true".
Créer élément <input> et spécifiez l'identifiant, plus de type de données sur l'élément = "search" attribut. Cela va créer un champ de recherche de base. L'élément <input> est placé sous une forme, la forme élément <form> utilise classe "ui-filtrables" - Cette classe sera ajustée en dehors du champ de recherche et loin de l'élément filtrant.
Ensuite, ajouter l'attribut d'entrée de données pour l'élément de filtre. Cette valeur doit être id <input> éléments.

Ensuite, nous créons une liste filtrée:

éléments de recherche Liste

<Form class = "ui-filtrables ">
<Input id = données "myFilter" 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 »

Astuce: Vous pouvez utiliser l'attribut d'espace réservé dans le champ de recherche pour définir le message:

Exemples

Essayez »

Les filtres personnalisés

Généralement inséré dans le texte de chaque élément de la liste est à utiliser comme un texte de filtre (comme A correspondant à "Adele" ou "B" correspond à "Billy"). Mais si vous voulez spécifier un filtre de texte personnalisé, vous devez utiliser l'attribut de données dans les éléments de critère de recherche enfant:

Exemples

<Li données critère de recherche = "fav "> <a href="#"> Adele </a> </ li>

Essayez »

	Si vous utilisez un attribut data-critère de recherche dans l'élément, les éléments de contenu du texte source seront ignorés lorsque le filtre, puis si vous devez chercher la liste des articles "Adele", nécessite l'utilisation de mots-clés comme: f, a, v, ou fav.