Predictive search

Sieve incluye una búsqueda predictiva de productos: un cuadro de búsqueda que muestra los productos coincidentes en un desplegable a medida que el comprador escribe. Es un widget independiente del filtro por facetas, así que puedes colocarlo donde quieras: en una cabecera, en una página de destino o encima de un archivo.

Colocación

Usa el shortcode:

[sieve_search]

O añade el bloque Sieve Search en el editor. Ambos renderizan el mismo cuadro de búsqueda accesible.

Atributos del shortcode

Atributo	Predeterminado	Descripción
placeholder	Search products	Texto de marcador que se muestra en el campo vacío.
button	yes	Mostrar el botón de envío junto al campo.
button_text	Search	Etiqueta del botón de envío.
limit	6	Número máximo de sugerencias en el desplegable (1-20).
min_chars	2	Caracteres necesarios antes de que aparezcan las sugerencias (1-10).
in_stock_only	yes	Limitar las sugerencias a productos en stock.

Ejemplo:

[sieve_search placeholder="Find products…" limit="8" in_stock_only="no"]

Cómo funciona

A medida que el comprador escribe, Sieve solicita coincidencias a un endpoint REST público y renderiza un desplegable de productos con una miniatura, nombre, SKU y precio. Cada resultado enlaza directamente con el producto, y un enlace de “ver todos los resultados” abre la página de búsqueda completa.

Las sugerencias se basan en la propia búsqueda de productos de WooCommerce, por lo que respetan la visibilidad del catálogo y se mantienen correctas a medida que el catálogo crece. El script de búsqueda es un paquete pequeño e independiente: las páginas que solo usan [sieve_search] nunca cargan el motor del filtro por facetas, lo que las mantiene rápidas.

Qué coincide

El desplegable va más allá de los títulos de los productos:

• Títulos y SKU, comparados con un índice de tokens preconstruido y sin diacríticos.
• Categorías. Las categorías de productos cuyo nombre coincide con el término aparecen como su propio grupo en el desplegable, enlazando directamente con el archivo de categoría filtrado. Esto permite al comprador saltar a toda una categoría en lugar de a un solo producto.
• Descripciones y contenido mediante la propia búsqueda por relevancia de WooCommerce, usada como alternativa cuando el índice de tokens no encuentra nada.

Cuando coinciden tanto productos como categorías, el desplegable muestra dos grupos etiquetados (Categorías y Productos). La navegación con teclado recorre ambos.

Insensible a diacríticos y tolerante a errores tipográficos

La coincidencia ignora los diacríticos: un comprador que escribe lozko encuentra łóżko, y zolty encuentra żółty. Funciona en ambos sentidos, así que no importa si el comprador o el nombre del producto usan los caracteres acentuados.

También se toleran los errores tipográficos pequeños. Una consulta como zoltyy sigue encontrando żółty, porque Sieve compara la palabra escrita con palabras similares de los productos y acepta una coincidencia cercana. Las categorías se comparan de la misma manera, sin distinguir diacríticos.

Tanto el texto del producto como la consulta se normalizan de la misma forma en un índice de tokens rápido, así que esto se mantiene ágil incluso en catálogos grandes. Instalar o actualizar a esta versión reconstruye el índice de búsqueda una vez en segundo plano.

La búsqueda como filtro

El cuadro independiente [sieve_search] de arriba navega a un producto o a la página de búsqueda. Dentro del filtro por facetas, la búsqueda se comporta de forma distinta: es un filtro. Añade una faceta Search a tu filtro [sieve] y el comprador podrá escribir para acotar la cuadrícula de productos en vivo en el sitio, combinada con todas las demás facetas.

• La cuadrícula se acota a medida que escribes. Como cualquier otra faceta, los resultados se actualizan en vivo sin recargar la página, y el término escrito se refleja en la URL (por lo que se puede compartir y sobrevive a los botones atrás/adelante).
• El mismo índice tolerante a diacríticos y errores tipográficos. La búsqueda en la cuadrícula usa exactamente el mismo índice de tokens sin diacríticos que el desplegable, por lo que la cuadrícula y las sugerencias siempre coinciden: lozko acota la cuadrícula a łóżko, y un pequeño error tipográfico sigue coincidiendo.
• Un desplegable predictivo ayuda. Bajo el campo aparece una lista fina de sugerencias para seleccionar con el teclado; elegir una sugerencia establece un término preciso y vuelve a filtrar la cuadrícula en el sitio (no navega a otra página).
• Es un filtro que se puede eliminar. La búsqueda activa se muestra como una etiqueta (chip) en la barra de herramientas junto a tus otros filtros; eliminar la etiqueta (o vaciar el campo) restaura la cuadrícula completa.
• Los recuentos se mantienen fieles. Los recuentos de las demás facetas se actualizan para reflejar el conjunto buscado, así que nunca verás una opción que llevaría a cero resultados.
• Sugerencias acotadas. Cuando hay otras facetas activas, las sugerencias se limitan a esa selección, así que una búsqueda “dentro de” los filtros actuales solo propone productos que son realmente accesibles.

La búsqueda en la cuadrícula compara títulos y SKU a través del índice. Los productos que solo coincidirían por el texto de su descripción se alcanzan mediante el widget independiente [sieve_search], no mediante el filtro en la cuadrícula.

Accesibilidad

El cuadro de búsqueda sigue el patrón de combobox de ARIA:

• El campo es un combobox que controla un listbox de opciones.
• Las sugerencias de categorías y productos se exponen como grupos etiquetados dentro del listbox.
• Flecha abajo / Flecha arriba recorren todas las sugerencias (categorías y productos), Enter abre la activa, Escape cierra el desplegable.
• La opción activa se rastrea con aria-activedescendant para los lectores de pantalla.
• Si JavaScript no está disponible, el cuadro envía a la búsqueda de productos estándar de WooCommerce, así que siempre funciona.

Rendimiento

• Las peticiones se retrasan (debounce) mientras se escribe, y una petición en curso se cancela cuando llega una pulsación de tecla más reciente.
• Las miniaturas se cargan de forma diferida (lazy).
• Sin desplazamiento de diseño: el desplegable tiene posición absoluta y no reserva espacio hasta que se abre.