FilterField
Le champ qui filtre la liste juste en dessous au fur et à mesure que l'on tape, et indique combien il reste.
Sur cette page
Playground
- Sauvegarde hebdomadaire
- Arroser les plantes
- Rapport du mois
- Changer les photos
Attente
Recherche asynchrone
Fond
<div class="feitio-stack" data-gap="3" style="inline-size: min(100%, 26rem)" ><div class="feitio-filter"><label class="feitio-visually-hidden" for="pg-filter">Filtrer</label><span class="box"><input class="feitio-input" id="pg-filter" type="search" autocomplete="off" placeholder="plantes, sauvegarde…" data-filter="pg-filter-list"><span class="wait" aria-hidden="true"></span><svg class="busy" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="1" d="M12 3.4C16.9 3.2 20.7 7.1 20.6 12C20.5 16.7 16.7 20.6 12 20.6C7.2 20.6 3.4 16.8 3.4 12.1C3.4 7.6 6.9 3.9 11.4 3.5"></path></svg></span><span class="count" data-count="pg-filter-list" aria-live="polite"></span></div><ul class="feitio-task-list" id="pg-filter-list"><li data-search="Sauvegarde hebdomadaire"><span class="name">Sauvegarde hebdomadaire</span></li><li data-search="Arroser les plantes"><span class="name">Arroser les plantes</span></li><li data-search="Rapport du mois"><span class="name">Rapport du mois</span></li><li data-search="Changer les photos"><span class="name">Changer les photos</span></li></ul></div>Quand l'utiliser
- Au-dessus d'une liste ou catalogue déjà à l'écran : les icônes, les composants, un long tableau.
Quand ne pas l'utiliser
- Pour rechercher tout le produit : Rechercher.
- Listes courtes : l'œil le trouve seul.
Exemples
- Récap hebdomadaire
- Arroser les plantes
- Rapport mensuel
- Remplacer les photos
Rien de ce nom.
Filtrer une liste
Type : la liste se réduit et le comptage suit. Sans résultat, une phrase l'indique.
Afficher le code
<div class="feitio-filter">
<label class="feitio-visually-hidden" for="filtro">Filtrar</label>
<input class="feitio-input" id="filtro" type="search" data-filter="lista">
<span class="count" data-count="lista" aria-live="polite"></span>
</div>
<ul id="lista">
<li data-search="regar as plantas">…</li>
</ul>- Sauvegarde hebdomadaire
- Arroser les plantes
- Rapport du mois
- Changer les photos
Attendre et chercher sur le serveur
Désactivés par défaut. Avec data-debounce, le champ attend que la personne arrête de taper, et la ligne en dessous montre combien il reste. Avec data-async, il prévient la page avec l’événement feitio-filter et fait tourner un trait jusqu’à ce qu’elle appelle done(). Ici, la fausse recherche prend une seconde.
Afficher le code
<input class="feitio-input" type="search" data-filter="lista"
data-debounce="600" data-async data-busy-label="Buscando…">
<script>
campo.addEventListener('feitio-filter', async (e) => {
const itens = await buscar(e.detail.query);
mostrar(itens);
e.detail.done();
});
</script>Accessibilité
- Le champ possède un libellé, même s'il est caché ; le comptage est annoncé (
aria-live). - Recherche insensible aux accents : "acao" trouve "ação".
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-filter" | autour | Le champ et le comptage, côte à côte. |
data-filter | l'identifiant de la liste | Sur le champ : quelle liste il filtre. |
data-search | sur chaque élément | Les mots qui trouvent l'élément. |
data-count, data-empty | l'identifiant de la liste | Le comptage et la phrase « rien trouvé ». |