# FilterField

Le champ qui filtre la liste juste en dessous au fur et à mesure que l'on tape, et indique combien il reste.

## Playground

```html
<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

### Filtrer une liste

Type : la liste se réduit et le comptage suit. Sans résultat, une phrase l'indique.

Afficher le code

```html
<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>
```

### 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

```html
<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é ».