Guide / Article

How to add live search on Webflow Page

Aviv
October 30, 2020
How to add live search on Webflow Page

Le plugin Hideseek est très léger et simple à utiliser. C'est exactement ce qui peut rendre votre page plus conviviale et aider les utilisateurs à trouver plus rapidement ce qu'ils veulent.

La première étape consiste à créer notre hiérarchie/structure dans la page. Pour cela, nous avons besoin :

  1. Barre de recherche (bloc de saisie)
  2. Conteneur à fouiller

La barre de recherche peut être ajoutée manuellement avec du code dans un widget HTML intégré, ou utiliser un bloc de formulaire et supprimer tous les autres champs et boutons (ne laisser qu'un seul champ de saisie). Dans les deux cas, ajoutez un identifiant à la barre de recherche.

Le conteneur doit porter un nom de classe ou une identification.

2nd step, add the plugin script source (I use CDN, you can download from here and upload to your server) before the tag.

La dernière étape consiste à lancer le plugin avec certaines configurations.

Le "#search" est l'identifiant de la barre de recherche. C'est ainsi que le plugin sait que lorsque nous tapons dans cette barre de recherche spécifique, il doit rechercher le conteneur. Le " .wrapping-div " est le nom de classe du conteneur à rechercher.

Le terme "nodata" est un état TRÈS SIMPLE et vide. Seul le texte, qui peut être stylisé en ciblant le nom de classe ".no results", est mis en évidence : "highlight : true" met en évidence le terme recherché dans les résultats (peut également être stylisé en ciblant le nom de classe ".highlight").


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

Aviv
October 30, 2020

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.