Search

A busca do produto: um campo no meio da tela, com os resultados enquanto a pessoa digita, um por linha.

Nesta página

Playground

Resultados

Fundo

HTML

<dialog open class="feitio-dialog search-dialog search-sample" id="pg-search" aria-labelledby="pg-search-t"><form method="dialog"><h2 id="pg-search-t" class="feitio-visually-hidden">Buscar no Feitio</h2><div class="search-head"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-search"></use></svg><label class="feitio-visually-hidden" for="pg-search-field">Buscar no Feitio</label><input class="search-field" id="pg-search-field" type="search" autocomplete="off" placeholder="Button, cor…"><button type="submit" class="feitio-button close" data-size="small" value="close"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fechar</button></div><ul class="results"><li><a href="#playground" data-active><strong>Table</strong><small>Componentes</small></a></li><li><a href="#playground"><strong>Tokens</strong><small>Desenvolvimento</small></a></li></ul><p class="foot"><span><kbd class="feitio-kbd">↵</kbd> abre o primeiro</span><span><kbd class="feitio-kbd">↑</kbd><kbd class="feitio-kbd">↓</kbd> escolhe</span><span><kbd class="feitio-kbd">Esc</kbd> fecha</span></p></form></dialog>

Quando usar

Num produto ou numa documentação com muitas páginas, em que achar pelo menu demora.

Quando não usar

Para filtrar uma lista que está na tela: um campo de filtro em cima dela, como nos catálogos.
Com poucas páginas: o menu basta.

Exemplos

A busca deste site

Toque no botão, ou aperte / ou Ctrl + K.

Mostrar código

HTML

<button type="button" class="feitio-button" data-open-search>…Buscar</button>
<dialog class="feitio-dialog search-dialog" aria-labelledby="busca-t">
  <form method="dialog">
    <div class="search-head">…<input class="search-field" type="search">…</div>
    <ul class="results">…</ul>
    <p class="foot">…</p>
  </form>
</dialog>

Anatomia

TableFechar

TableComponentes
TokensDesenvolvimento

↵ abre o primeiroEsc fecha

Campo: com a lupa e o Fechar na mesma linha.
Resultados: um por linha, o nome e a área; o primeiro já marcado.
Teclas: o que cada uma faz.

Estados

Aberta: no meio da tela, um pouco acima do centro; um toque fora fecha, porque buscar não é decidir nada.
Digitando: os resultados mudam a cada letra; Enter abre o primeiro e as setas andam pela lista.
Nada encontrado: diz isso e sugere outra palavra.

De onde vêm os resultados

O índice é montado na publicação do site, a partir de todas as páginas (com o Pagefind, que roda sem servidor). Neste rascunho, a lista é escrita à mão.

É um Dialog com nome; o foco começa no campo.
Os resultados são links: Tab, setas e Enter funcionam.

Atributos

Atributo	Valores	Para quê
`data-open-search`	no botão que abre	Abre a busca.
`class="feitio-dialog search-dialog"`	no `<dialog>`	A busca, que fecha com um toque fora.
`class="results"`	a lista	Um resultado por linha.