Comment ajouter une recherche en temps réel dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une recherche en temps réel dans Webflow grâce à Finsweet CMS Search.

1. Ajoutez le script Finsweet CMS Search

Dans Page Settings > Head, ajoutez :

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssearch@1/cmssearch.js" defer>script>

2. Configurez les éléments dans Webflow

Ajoutez un Input Text avec l'attribut fs-cmssearch-element="input". Sur votre Collection List Wrapper, ajoutez fs-cmssearch-element="list". Sur chaque champ CMS que vous voulez indexer (titre, description, tags), ajoutez fs-cmssearch-field="[nom-du-champ]".

3. Ajoutez un message "Aucun résultat"

Créez un Div avec le texte "Aucun résultat" et l'attribut fs-cmssearch-element="empty". Mettez-le en display: none par défaut : Finsweet l'affichera automatiquement quand la recherche ne retourne rien.

4. Combinez avec CMS Filter

CMS Search est compatible avec CMS Filter : les deux peuvent fonctionner simultanément sur la même collection. Les filtres affinent la catégorie, la recherche texte affine les résultats au sein de cette catégorie.

Conclusion

La recherche en temps réel améliore considérablement l'UX sur les catalogues volumineux. Cas d'usage :

• Répertoire de ressources ou d'articles
• Catalogue de produits ou de services
• FAQ avec nombreuses entrées