Volver a los artículos
Cómo agregar una búsqueda en vivo en la página Webflow
Tutoriales

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

Aquí hay un rápido tutorial de Aviv sobre cómo implementar la búsqueda de páginas en vivo en Webflow.

7 de noviembre de 2019

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.

<input id="search" placeholder="search for anything" type="text" name="">

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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/hideseek/0.8.0/jquery.hideseek.min.js"></script>

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,
  });
})

SOBRE EL AUTOR

¿Disfrutó de esta lectura?

Manténgase al día con las últimas noticias, estrategias e ideas sobre el negocio del vídeo enviadas directamente a su bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
¡Uy! Algo salió mal al enviar el formulario.

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.