FilterField
El campo que filtra la lista justo abajo a medida que el usuario escribe, y indica cuántos quedan.
En esta página
Playground
- Copia semanal
- Regar las plantas
- Informe del mes
- Cambiar las fotos
Espera
Búsqueda asíncrona
Fondo
<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
- Copia semanal
- Riegue las plantas
- Monthly report
- Replace the photos
Nada con ese nombre.
Filtrar una lista
Tipo: la lista se encoge y el contador sigue. Sin resultado, una frase lo indica.
Mostrar código
<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>- Copia semanal
- Regar las plantas
- Informe del mes
- Cambiar las fotos
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
<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. |