# Search La recherche produit : un champ au centre de l'écran, avec les résultats affichés ligne par ligne à mesure que vous tapez. ## Playground ```html ``` ## Quand l'utiliser - Dans un produit ou une documentation comportant de nombreuses pages, où la recherche via le menu prend trop de temps. ## Quand ne pas l'utiliser - **Pour filtrer une liste** sur l'écran : un champ de filtre au-dessus d'elle, comme dans les catalogues. - **Avec peu de pages :** le menu suffit. ## Exemples ### La recherche de ce site Cliquez sur le bouton, ou appuyez sur / ou Ctrl + K. Afficher le code ```html ``` ## Anatomie 1. **Champ :** avec la loupe et Fermer sur la même ligne. 2. **Résultats :** un par ligne, le nom et la zone ; le premier est déjà marqué. 3. **Clefs :** ce que chacune fait. ## États - **Ouvert :** au milieu de l'écran, un peu au-dessus du centre ; un clic à l'extérieur le ferme, car la recherche ne décide rien. - **Tapage :** les résultats changent avec chaque lettre ; Entrée ouvre le premier et les flèches naviguent dans la liste. - **Rien trouvé :** il le dit et suggère un autre mot. ## D'où proviennent les résultats L'index est construit lorsque le site est publié, à partir de chaque page (avec Pagefind, qui fonctionne sans serveur). Dans ce brouillon, la liste a été écrite à la main. ## Accessibilité - C'est un Dialog nommé ; le focus commence dans le champ. - Les résultats sont des liens : Tab, flèches et Entrée fonctionnent. ## Attributs Attribut Valeurs Pour quoi `data-open-search` sur le bouton d'ouverture Ouvre la recherche. `class="feitio-dialog search-dialog"` sur le `