Advanced Search

La búsqueda avanzada combina un campo de búsqueda con una fila de filtros, el criterio de orden y los filtros activos como chips. Sirve para acotar listados extensos de trámites, beneficios, documentos o convocatorias.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando la persona necesita encontrar algo dentro de un conjunto grande y variado de resultados, y hay criterios claros para acotarlo: región, institución, tipo de beneficio, fecha o estado.

Si solo necesitas buscar por palabras, usa Searchbar. Si el listado es corto (menos de una pantalla), muéstralo completo o agrúpalo con títulos; y si hay pocas categorías excluyentes, considera Tabs o Chips como filtros rápidos.

Buenas prácticas

Recomendado: Usa filtros que reflejen cómo busca la ciudadanía

Los filtros responden a las preguntas que la persona ya se hace, con nombres cotidianos y no con la estructura interna de las instituciones.

Recomendado: Muestra los filtros activos y permite quitarlos uno a uno o todos a la vez

Cada filtro aplicado aparece como chip. La persona entiende por qué ve esos resultados y puede quitar uno sin empezar de nuevo. Suma una acción para quitar todos los filtros de una vez.

Recomendado: Indica el total de resultados y cómo están ordenados

Muestra cuántos resultados hay y con qué criterio se ordenan, eligiendo el orden que más sirve a la tarea.

Recomendado: Ofrece una salida cuando no hay resultados

Si la combinación de filtros no devuelve nada, dilo con claridad y sugiere qué hacer: quitar un filtro o buscar con otras palabras.

Malas prácticas

No recomendado: No muestres demasiados filtros a la vez

Nueve filtros visibles convierten la búsqueda en un formulario. Prioriza los dos o tres que más acotan.

No recomendado: No uses nombres internos o técnicos en los filtros

“Cód. SIAC”, “Glosa” o “Tipo DFL” son el lenguaje de la institución, no el de la ciudadanía. Nadie filtra por algo que no entiende.

No recomendado: No apliques filtros sin mostrarlos

Con un filtro de región activo pero oculto y sin chips, la persona cree que ve todo y puede concluir que un beneficio no existe.

No recomendado: No la uses para listados cortos

Filtros, orden y chips sobre tres resultados agregan pasos sin beneficio. Con pocos elementos, es más rápido mostrarlos todos.

Recomendaciones de accesibilidad

Da un label visible al campo de búsqueda
El campo principal es un .cl-field con <label> asociado al <input type="search">. No lo reemplaces por un placeholder: la lupa es decorativa (aria-hidden="true") y no nombra el campo.

Nombra cada filtro
Cada Select de la fila de filtros necesita su propio label visible, vinculado al trigger con aria-labelledby. Evita labels genéricos (“Filtro 1”) que no dicen qué acotan.

Anuncia los cambios en los resultados
Al aplicar o quitar un filtro, anuncia el nuevo total de resultados en una región con role="status" (p. ej. “18 resultados”), para que quien usa lector de pantalla sepa que la lista cambió.

Incluye el filtro en el nombre del botón de quitar
El botón del chip (.cl-chip__remove) usa aria-label. Hazlo específico (“Quitar filtro Región: Ñuble”) para que no haya varios botones “Quitar filtro” iguales.

Comunica el estado del panel de filtros
Si el botón de la fila de acciones abre y cierra los filtros, usa aria-expanded y aria-controls apuntando al contenedor de filtros, y cambia su texto según el estado.

Cuida el foco al quitar filtros
Cuando un chip desaparece, mueve el foco a un lugar predecible (el siguiente chip o el título de resultados) para que la persona no pierda su posición en la página.