# FilterField

El campo que filtra la lista justo abajo a medida que el usuario escribe, y indica cuántos quedan.

## 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">Filtrar</label><span class="box"><input class="feitio-input" id="pg-filter" type="search" autocomplete="off" placeholder="plantas, copia…" 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="Copia semanal"><span class="name">Copia semanal</span></li><li data-search="Regar las plantas"><span class="name">Regar las plantas</span></li><li data-search="Informe del mes"><span class="name">Informe del mes</span></li><li data-search="Cambiar las fotos"><span class="name">Cambiar las fotos</span></li></ul></div>
```

## Cuándo usarlo

-   Por encima de una lista o catálogo ya en pantalla: los iconos, los componentes, una tabla larga.

## Cuándo no usarlo

-   **Para buscar todo el producto:** Buscar.
-   **Listas cortas:** El ojo lo encuentra solo.

## Ejemplos

### Filtrar una lista

Tipo: la lista se encoge y el contador sigue. Sin resultado, una frase lo indica.

Mostrar código

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

### Esperar y buscar en el servidor

Apagados por defecto. Con `data-debounce`, el campo espera a que la persona deje de escribir, y la línea debajo muestra cuánto falta. Con `data-async`, avisa a la página con el evento `feitio-filter` y muestra el trazo girando hasta que ella llama a `done()`. Aquí, la búsqueda de mentira tarda un segundo.

Mostrar código

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

## Accesibilidad

-   El campo tiene una etiqueta, incluso si está oculta; el contador se anuncia (`aria-live`).
-   Búsqueda insensible a acentos: "acao" encuentra "ação".

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-filter"`

alrededor

El campo y el contador, lado a lado.

`data-filter`

el id de la lista

En el campo: qué lista filtra.

`data-search`

en cada elemento

Las palabras que encuentran el elemento.

`data-count`, `data-empty`

el id de la lista

El contador y la frase de no encontrado.