# Buscador > Búsqueda del sitio: campo en el header, búsqueda que se despliega, buscador destacado y de una sección, sugerencias y página de resultados. Categoría: Navegación · Solar v0.8.0 Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html). ## Guía: Cuándo usarlo El buscador lleva a cualquier página del sitio escribiendo lo que se necesita. Es un campo de verdad, con sugerencias mientras se escribe, y termina en una página de resultados. Elige la forma de entrar según cuánto importa buscar en ese sitio. Forma | Cuándo | En el celular B1 · Campo en el header | Por defecto, en sitios donde buscar es una forma principal de llegar al contenido. | Lupa que abre B2. B2 · Búsqueda que se despliega | Headers sin espacio, o sitios donde se navega más de lo que se busca. | Pantalla completa. B3 · Buscador destacado | Portadas donde buscar es la tarea principal. No reemplaza al del header. | Igual, a todo el ancho. B4 · Buscador de una sección | Listados largos (noticias, documentos), junto al contenido. | Igual. - Un campo de verdad. Un botón con forma de campo que abre una ventana no es un buscador: no se usa en los sitios de la CCS. - Busca en todo el sitio. Nunca con una sección elegida de antemano; la sección se ofrece como una sugerencia más o en los resultados. - Al menos 288 px de ancho en escritorio (27 caracteres, más un 20 % por el español). La lupa envía la búsqueda. - Atajo: solo Ctrl K (⌘K en Mac). Nunca «/» ni una letra sola. El atajo es un extra: el buscador siempre se alcanza con Tab o con un toque. - Filtrar no es buscar. Para achicar una tabla o una lista que ya está en la página, usa el filtro de Tabla de datos: el mismo campo, sin sugerencias ni página de resultados. - Para elegir un valor en un formulario (una comuna, una empresa) usa Combobox. En aplicaciones con muchas acciones, Paleta de comandos. Por qué: Un campo visible hace que la gente busque más que un ícono o un enlace (Nielsen Norman Group, 2014; Baymard, 2014; cuando un sitio cambió un enlace por un campo, el uso subió 91 %, Nielsen, 2001). El botón que abre una ventana es una costumbre de sitios de documentación, sin estudios con usuarios. Preseleccionar una sección causó abandonos en pruebas con usuarios (Baymard, 2014; NN/g, 2015). «/» y las letras solas chocan con los lectores de pantalla y con el navegador, y WCAG 2.1.4 pide poder desactivarlos. Investigación completa en la documentación interna de Solar. ## Guía: Entrada Cuatro formas de entrar a la misma búsqueda. Todas buscan en todo el sitio, salvo B4, y llevan a la misma página de resultados. ## B1 · Campo en el header ```html

``` ## B2 · Búsqueda que se despliega ```html

Buscar en el sitio

arbitraje comercial
calendario de eventos
hazte socio

 ``` ## B3 · Buscador destacado ```html

¿Qué necesitas hacer?

Lo más buscado:

``` ## B4 · Buscador de una sección ```html

Noticias

¿No está aquí? Buscar en todo el sitio

``` ## Guía: Sugerencias Aparecen desde el tercer carácter, en una lista bajo el campo: hasta 8 en escritorio y 5 en el celular. La parte que se predice va en negrita y lo escrito, normal. Enter sobre el texto escrito busca exactamente eso. Por qué: En una prueba A/B de GOV.UK (2024), las sugerencias se usaron en el 55 % de las búsquedas donde aparecieron y los clics en resultados subieron de 65 % a 92 %. Las sugerencias de páginas casi no se usan (7 de 60 veces, NN/g, 2022): si las pones, van después de las de texto y rotuladas. ## Búsquedas recientes ```html
arbitraje comercial
calendario de eventos
hazte socio

3 búsquedas recientes.
``` ## Mientras se escribe ```html
certificado de origen
certificado de origen digital
certificación de firmas
certificados para exportar a Europa
certificado de socio

5 sugerencias. Usa las flechas para recorrerlas.
``` ## Con una sección ```html
certificado de origen
certificado de origen digital
certificación de firmas
«certif» en Comercio exterior

4 sugerencias. Usa las flechas para recorrerlas.
``` ## Con páginas ```html
certificado de origen
certificado de origen digital
certificación de firmas
Certificado de origenServicio
Cómo pedir un certificado de origenGuía

5 sugerencias en 2 grupos. Usa las flechas para recorrerlas.
``` ## Cargando sugerencias ```html

Buscando sugerencias.
``` ## Guía: Página de resultados La página de resultados repite la consulta en un campo que se puede corregir, dice cuántos resultados hay y los muestra de 20 en 20. Cada resultado dice qué es (página, PDF, noticia, evento), muestra por qué coincide con los términos en negrita y su fecha. Por qué: La gente reformula su búsqueda unas 2 veces y abandona tras 3 a 5 intentos fallidos (Baymard): borrar la consulta la obliga a escribir todo de nuevo. El 57 % dudó de por qué un resultado coincidía cuando no había fragmento (Baymard, 2014). GOV.UK pasó de 50 a 20 resultados por página porque el 95 % de los clics caía en los primeros 20. El scroll infinito no sirve para buscar (NN/g, 2022). ## Página completa La página de resultados entera, con el header E4 de Header. En la página de ejemplo puedes buscar, abrir los filtros y probarla en el celular. Ejemplo en página completa: https://utiliza.me/solar/demos/buscador/pagina-completa.html ```html

Resultados para «certificado de origen»

128 resultados

2 filtros:

Filtrar resultados

Tipo de contenido
Fecha
Área

  1. RecomendadoPáginaComercio exterior

    Certificado de origen

    El certificado de origen acredita que tus productos se fabricaron en Chile y te permite usar las rebajas de aranceles de los acuerdos comerciales.

    Actualizado el 14 de octubre de 2026

  2. PDF · 1,2 MBGuías

    Guía para pedir un certificado de origen

    Paso a paso para pedir el certificado de origen en línea: qué documentos necesitas, cuánto demora y cuánto cuesta.

    Publicado el 2 de septiembre de 2026

  5. PáginaPreguntas frecuentes

    Preguntas frecuentes sobre certificados

    ¿Cuánto demora un certificado de origen? ¿Se puede pedir en el extranjero? Respuestas a las dudas más comunes.

    Actualizado el 30 de julio de 2026

Mostrando 20 de 128 resultados

``` ## Resultados ```html

  1. RecomendadoPáginaComercio exterior

    Certificado de origen

    El certificado de origen acredita que tus productos se fabricaron en Chile y te permite usar las rebajas de aranceles de los acuerdos comerciales.

    Actualizado el 14 de octubre de 2026

  2. PDF · 1,2 MBGuías

    Guía para pedir un certificado de origen

    Paso a paso para pedir el certificado de origen en línea: qué documentos necesitas, cuánto demora y cuánto cuesta.

    Publicado el 2 de septiembre de 2026

``` ## Filtros y orden ```html

128 resultados

2 filtros:

Filtrar resultados

Tipo de contenido
Fecha
Área
``` ## Corrección de la búsqueda ```html

No encontramos «certificado de orijen». Mostrando resultados para certificado de origen. Buscar en cambio «certificado de orijen»

``` ## Búsqueda en una sección ```html

Buscando solo en Noticias

Buscar en todo el sitio
``` ## Sin resultados ```html

No encontramos resultados para «certificado de orijen»

Revisa cómo lo escribiste, usa menos palabras o quita los filtros.

Te puede servir

¿Necesitas ayuda?

Escríbenos y te ayudamos a encontrarlo.

Escríbenos
``` ## Cargando resultados ```html

Buscando resultados.

``` ## Cargar más, en el celular ```html

Mostrando 20 de 128 resultados

``` ## Guía: Comportamiento Solar entrega el HTML y los estilos; el JavaScript es del proyecto. - Sugerencias: desde el tercer carácter, con una pausa corta (unos 200 ms) entre teclas. Hasta 8 en escritorio y 5 en el celular. Solo términos que dan buenos resultados. Sin sugerencias, la lista se cierra y Enter igual busca. - Teclado (patrón combobox de ARIA): ↓ y ↑ recorren la lista con aria-activedescendant y aria-selected, sin sacar el foco del campo. Enter busca la opción marcada o, si no hay, el texto escrito. Esc cierra la lista y, si ya está cerrada, borra el texto. Un clic o toque en una opción busca esa opción. - Búsquedas recientes: opcionales, al enfocar el campo vacío, guardadas solo en el navegador y con «Borrar búsquedas recientes». Apágalas en sitios que se usan en computadores compartidos. - Borrar: la «X» aparece solo con texto (CSS). En el header es type="reset" y borra sin JavaScript; en la página de resultados el campo trae la consulta, así que lo borra el JavaScript. En ambos casos el foco vuelve al campo. - B2: un que se abre con commandfor y command="show-modal"; el campo tiene autofocus. En el celular ocupa la pantalla; desde 640 px es una franja arriba. La «X», Esc o un toque afuera lo cierran (closedby="any"); con la lista abierta, el primer Esc cierra la lista. Al cerrar, el foco vuelve a la lupa. - Atajo Ctrl K / ⌘K: enfoca el campo si está a la vista; si no (celular, B2), abre la búsqueda. No hace nada si el foco está en otro campo o en un editor de texto. La pista «Ctrl K» se ve solo con teclado y mouse, con el campo vacío y sin foco (CSS). Prueba en tu sitio que el navegador no se quede con el atajo (Edge lo usa para duplicar la pestaña). - Enviar: GET a la página de resultados con ?q=, para que la búsqueda se pueda compartir y volver atrás funcione. - Resultados: 20 por página con Paginación; en el celular, «Cargar más resultados» (sin scroll infinito). Los filtros se aplican todos juntos con «Ver resultados» en un panel lateral, y cada filtro aplicado aparece como chip que se quita con un clic. Con un error de tipeo y sin resultados, muestra los de la palabra corregida y ofrece buscar lo que se escribió. Tildes, ñ y mayúsculas dan lo mismo. - Medición: búsquedas sin resultados, reformulaciones, salidas desde los resultados y posición del clic. Revisa cada 6 meses las búsquedas más frecuentes y las sin resultados para mejorar el contenido y los sinónimos. El atajo, en pocas líneas: document.addEventListener('keydown', (e) => { if (!(e.ctrlKey || e.metaKey) || e.key.toLowerCase() !== 'k' || e.isComposing) return; const t = e.target; if (t.closest('input, textarea, select, [contenteditable]') && !t.matches('[role="combobox"]')) return; const campo = [...document.querySelectorAll('[data-buscador] input')].find((i) => i.offsetParent); const boton = [...document.querySelectorAll('button[commandfor][aria-keyshortcuts]')].find((b) => b.offsetParent); if (campo) { e.preventDefault(); campo.focus(); campo.select(); } else if (boton) { e.preventDefault(); document.getElementById(boton.getAttribute('commandfor')).showModal(); } }); ## Guía: Accesibilidad - marca la zona de búsqueda (rol search). Si hay más de una en la página, cada una lleva aria-label sin la palabra «búsqueda», por ejemplo «Noticias». - Etiqueta siempre, aunque esté oculta (sr-only): el texto de ayuda dentro del campo no basta. - El campo lleva role="combobox", aria-autocomplete="list", aria-expanded y aria-controls; las sugerencias, role="listbox" y role="option", con grupos con nombre. La opción marcada se ve con su propio fondo, porque el foco sigue en el campo. - La cantidad de sugerencias y de resultados se anuncia con role="status" («5 sugerencias», «128 resultados», «Sin resultados»). - type="search" con enterkeyhint="search" (tecla «Buscar» en el teclado del celular) y autocomplete="off"; la «X» del navegador se oculta y la reemplaza un botón con nombre. - Los botones de solo ícono tienen nombre: «Buscar», «Borrar búsqueda», «Cerrar búsqueda». El atajo se declara con aria-keyshortcuts="Control+K Meta+K". - En el celular el texto del campo es de 16 px, para que el teclado no acerque la página. - Enfocar o escribir nunca lleva a otra página: solo Enter o elegir una opción. - Un header fijo no puede tapar el campo ni los resultados que tienen el foco (WCAG 2.4.11).