Guide / Article

Comment ajouter une recherche en direct sur la page Webflow

Aviv
28 janvier 2021
Comment ajouter une recherche en direct sur la page Webflow

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.

2ème étape, ajouter la source du script du plugin (j'utilise le CDN, vous pouvez télécharger à partir d'ici et charger sur votre serveur) avant la balise.

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.

nodata" est un état TRÈS SIMPLE et vide. Uniquement du texte, qui peut être stylisé en ciblant le nom de classe ".no-results". "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
28 janvier 2021

Recevez les ressources du webflow directement dans votre boîte aux lettres.

Inscrivez-vous pour recevoir chaque semaine dans votre boîte de réception des informations et de l'inspiration.

AUTRES GUIDES ET LEÇONS

Boostez votre site webflow davantage.