Des ressources pour mettre en place une recherche sur votre site

Aujourd'hui le BlogDuWebdesign vous propose une liste de ressources vous permettant de mettre en place une recherche dans les données de votre site sans passer par un serveur.

List.js

List.js est comme son nom l'indique une bibliothèque de gestion de listes. Ajout et suppression dynamiques sont au programme bien sur mais ce qui nous intéresse aujourd'hui est la gestion des filtres.

L'exemple ci-dessous vos présente une utilisation très basique de List.js, c'est-à-dire une simple fuzzy-search.

See the Pen List.js – Fuzzy search by Jonny Strömberg (@javve) on CodePen.

Sans doutes la plus simple a utiliser de toutes les ressources de cette liste, List.js est aussi la plus restrictive d'un point de vue markup. Neanmoins, List.js est une excellente ressource pour mettre en place un systeme de tri par categorie, tags et recherches par mot-cle.

Holmes

Un peu plus complexe à utiliser, Holmes est une ressource permettant là aussi de créer une recherche dans vos pages et de filtrer ou non l'affichage d'éléments sur votre site.

Adieu les fonctions liées a l'ajout de liste que nous retrouvions dans List.js, ici nous nous concentrons sur l'essentiel : la recherche. Pour aller plus loin, je vous propose de vous plonger dans la documentation de Holmes.

Wade

Enfin, Wade est une ressource permettant d'effectuer des recherches en Javascript sans aucun lien avec le DOM.

Ici et contrairement aux deux ressources précédentes, vous aurez à binder vous-même Wade avec votre HTML, que ce soit pour le passage de vos données sous la forme d'un tableau, la liaison avec le champ de recherche ou pour l'ajout/supression de classes sur vos résultats.

Si cela peut être ennuyeux dans certains cas, cela est très intéressant en revanche si vous n'avez pas besoin d'interface du tout, ou que vous voulez l'utiliser pour l'adapter avec d'autres ressources.