Freebies
Discover our latest free template, claim it today. Learn More

How to add live search on Webflow Page

Publicado por
Aviv
How to add live search on Webflow Page

El plugin de Hideseek es muy ligero y fácil de usar. Es exactamente lo que puede hacer que su página sea más amigable y ayudar a los usuarios a encontrar más rápido lo que quieren.

El primer paso es crear nuestra jerarquía/estructura en la página. Para eso necesitamos:

  1. Barra de búsqueda (bloque de entrada)
  2. Contenedor para buscar en

La barra de búsqueda puede añadirse manualmente con código en un widget de incrustación de HTML, o utilizar un bloque de formulario y eliminar todos los demás campos y botones (dejar sólo un campo de entrada). En ambos casos, agregue una identificación a la barra de búsqueda.

El contenedor debe tener un nombre de clase o una identificación.

2º paso, añadir el código fuente del plugin (yo uso CDN, puedes descargarlo desde aquí y subirlo a tu servidor) antes de la etiqueta.

El último paso es iniciar el plugin con algunas configuraciones.

La '#búsqueda' es el ID de la barra de búsqueda. Así es como el plugin sabe que cuando tecleamos en esta barra de búsqueda específica, debe buscar en el contenedor. El '.wrapping-div' es el nombre de clase del contenedor en el que se va a buscar.

"nodata" es un estado vacío MUY SIMPLE. Sólo el texto, que puede ser estilizado apuntando al nombre de clase '.no-resultados'. 'highlight: true' resalta el término de búsqueda en los resultados (también podría ser estilizado apuntando al nombre de clase '.highlight').


OTHER GUIDES & LESSONS

Boost your webflow site further.