# Search La búsqueda del producto: un campo en el centro de la pantalla, con resultados mientras se escribe, uno por línea. ## Playground ```html ``` ## Cuándo usarlo - En un producto o documentación con muchas páginas, donde encontrar cosas a través del menú tarda mucho. ## Cuándo no usarlo - **Para filtrar una lista** en la pantalla: un campo de filtro encima, como en los catálogos. - **Con pocas páginas:** el menú es suficiente. ## Ejemplos ### La búsqueda de este sitio Toca el botón, o presiona / o Ctrl + K. Mostrar código ```html ``` ## Anatomía 1. **Campo:** con lupa y Cerrar en la misma línea. 2. **Resultados:** uno por línea, el nombre y el área; el primero ya marcado. 3. **Teclas:** qué hace cada una. ## Estados - **Abrir:** en el centro de la pantalla, un poco por encima; un toque fuera lo cierra, porque buscar no decide nada. - **Escribiendo:** los resultados cambian con cada letra; Enter abre el primero y las flechas navegan por la lista. - **Nada encontrado:** lo dice y sugiere otra palabra. ## Donde vienen los resultados El índice se construye cuando el sitio se publica, desde cada página (con Pagefind, que funciona sin servidor). En este borrador, la lista se escribe a mano. ## Accesibilidad - Es un Dialog con nombre; el foco comienza en el campo. - Los resultados son enlaces: Tab, flechas y Enter funcionan. ## Atributos Atributo Valores Para qué sirve `data-open-search` en el botón de apertura Abrir la búsqueda. `class="feitio-dialog search-dialog"` en el `