Guía / Artículo

Cómo agregar una búsqueda en vivo en la página Webflow

Aviv
28 de enero de 2021
Cómo agregar una búsqueda en vivo en la página Webflow

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.

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

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


$(document).ready(function() {
  $('#search').hideseek({
    list: '.wrapping-div',
    nodata: 'Ooops... Nothing here...',
    highlight: true,
  });
})

Aviv
28 de enero de 2021

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.