FilterField
O campo que filtra a lista logo abaixo enquanto a pessoa digita, e diz quantos sobraram.
Nesta página
Playground
- Backup semanal
- Regar as plantas
- Relatório do mês
- Trocar as fotos
Espera
Busca assíncrona
Fundo
<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, backup…" 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="Backup semanal"><span class="name">Backup semanal</span></li><li data-search="Regar as plantas"><span class="name">Regar as plantas</span></li><li data-search="Relatório do mês"><span class="name">Relatório do mês</span></li><li data-search="Trocar as fotos"><span class="name">Trocar as fotos</span></li></ul></div>Quando usar
- Em cima de uma lista ou de um catálogo que já está na tela: os ícones, os componentes, uma tabela longa.
Quando não usar
- Para buscar no produto inteiro: Search.
- Listas curtas: o olho acha sozinho.
Exemplos
- Backup semanal
- Regar as plantas
- Relatório do mês
- Trocar as fotos
Nada com esse nome.
Filtrar uma lista
Digite: a lista diminui e a contagem acompanha. Sem resultado, uma frase diz isso.
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>- Backup semanal
- Regar as plantas
- Relatório do mês
- Trocar as fotos
Esperar e buscar no servidor
Desligados por padrão. Com data-debounce, o campo espera a pessoa parar de digitar, e a linha embaixo dele mostra quanto falta. Com data-async, ele avisa a página com o evento feitio-filter e mostra o traço girando até ela chamar done(). Aqui, a busca de mentira leva um 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>Acessibilidade
- O campo tem rótulo, mesmo escondido; a contagem é anunciada (
aria-live). - Busca sem acento: "acao" acha "ação".
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-filter" | em volta | O campo e a contagem, lado a lado. |
data-filter | o id da lista | No campo: qual lista ele filtra. |
data-search | em cada item | As palavras que acham o item. |
data-count, data-empty | o id da lista | A contagem e a frase de nada encontrado. |