# Search

Die Produkt-Suche: ein Feld in der Mitte des Bildschirms mit Ergebnissen, die sich einzeln pro Zeile beim Tippen ergeben.

## 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">Feitio durchsuchen</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">Feitio durchsuchen</label><input class="search-field" id="pg-search-field" type="search" autocomplete="off" placeholder="Button, Farbe…"><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>Schließen</button></div><ul class="results"><li><a href="#playground" data-active><strong>Table</strong><small>Komponenten</small></a></li><li><a href="#playground"><strong>Tokens</strong><small>Entwicklung</small></a></li></ul><p class="foot"><span><kbd class="feitio-kbd">↵</kbd> öffnet das erste</span><span><kbd class="feitio-kbd">↑</kbd><kbd class="feitio-kbd">↓</kbd> auswählen</span><span><kbd class="feitio-kbd">Esc</kbd> schließt</span></p></form></dialog>
```

## Wann verwenden

-   In einem Produkt oder einer Dokumentation mit vielen Seiten, wo das Finden von Dingen über das Menü lange dauert.

## Wann nicht verwenden

-   **Um eine Liste zu filtern** auf dem Bildschirm: ein Filterfeld darüber, wie in den Katalogen.
-   **Bei wenigen Seiten:** das Menü reicht aus.

## Beispiele

### Dieses Suchfeld der Website

Klicken Sie auf die Taste oder drücken Sie / oder Ctrl + K.

Code anzeigen

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

## Anatomie

1.  **Feld:** mit Lupe und Schließen auf derselben Zeile.
2.  **Erfolge:** einer pro Zeile, Name und Bereich; der erste ist bereits markiert.
3.  **Tasten:** was jeder tut.

## States

-   **Öffnen:** in der Mitte des Bildschirms, etwas über dem Zentrum; ein Klick außerhalb schließt ihn, denn das Suchen entscheidet nichts.
-   **Tastaturtippen:** die Ergebnisse ändern sich mit jedem Buchstaben; Enter öffnet den ersten Eintrag und die Pfeile durchlaufen die Liste.
-   **Nichts gefunden:** sagt es so und schlägt ein anderes Wort vor.

## Woher die Ergebnisse stammen

Der Index wird erstellt, wenn die Seite veröffentlicht wird, von jeder Seite (mit Pagefind, das ohne Server läuft). In diesem Entwurf ist die Liste manuell geschrieben.

## Barrierefreiheit

-   Es ist ein benannter Dialog; der Fokus beginnt im Feld.
-   Die Ergebnisse sind Links: Tab, Pfeile und Enter funktionieren.

## Attribute

Attribut

Werte

Zum Zweck

`data-open-search`

auf der Öffnungs-Button

Öffnet die Suche.

`class="feitio-dialog search-dialog"`

im `<dialog>`

Die Suche, die mit einem Klick außerhalb schließt.

`class="results"`

die Liste

Eins Ergebnis pro Zeile.