# Search

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

## Playground

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

1.  **Campo:** com a lupa e o Fechar na mesma linha.
2.  **Resultados:** um por linha, o nome e a área; o primeiro já marcado.
3.  **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.

## Acessibilidade

-   É 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.