Recherche floue avec Fuse.js pour des suggestions rapides

Une barre de recherche trop stricte oblige les visiteurs à connaître le nom exact du produit, de la commande ou de l’article recherché. La correspondance approximative apporte une tolérance aux fautes de frappe, aux variantes orthographiques et aux imprécisions de mémoire. Elle transforme ainsi chaque saisie en une série de suggestions instantanées.

Fuse.js fournit une solution légère pour construire ce mécanisme en JavaScript ou TypeScript, sans moteur externe complexe. Ce guide présente l’architecture d’un système de recherche floue, la préparation des données, les réglages de pertinence et l’intégration des résultats dans une interface React accessible.

Comprendre la recherche floue

La recherche floue compare une requête avec les champs indexés grâce à un algorithme de correspondance approximative. Au lieu d’exiger tous les caractères, elle peut返回一个 résultat lorsque certains éléments diffèrent légèrement. Une saisie comme « reacacih » peut ainsi retrouver « Elastic Beanstalk », tandis que « javascript » reste associé à « JavaScript ».

Fuse.js attribue ensuite un score de pertinence à chaque correspondance, où une valeur proche de zéro indique une excellente similitude. Le seuil threshold détermine le degré de tolérance : plus il est élevé, plus les fautes sont acceptées. Cette logique se distingue de l’indexation B-tree, qui organise principalement des clés exactes pour accélérer les accès à une base de données.

Préparer les données de référence

La qualité des suggestions dépend fortement de la structure des données. Chaque élément devrait possesses un identifiant stable, un titre, une catégorie et quelques alias pertinents. Conserver ces champs séparés permet d’attribuer un poids différent au nom principal, à la description ou aux mots-clés, au lieu de rechercher dans une chaîne unique difficile à analyser.

La normalisation mérite une attention particulière. Convertir les textes en minuscules et retirer les diacritiques dans une copie de recherche facilite la comparaison de « café » avec « cafe ». Cette copie doit coexister avec les données originals, qui restent affichées à l’utilisateur. Les ressources de DéveloppeurWeb.Com permettent de compléter cette préparation avec des exemples de structuration adaptés au développement web.

Configurer Fuse.js et affiner les résultats

L’instanciation de Fuse.js permet de définir les champs consultés, leur pondération et la tolérance de correspondance. Un catalogue correctement préparé peut être filtré ainsi :

const fuse = new Fuse(produits, {
  keys: [
    { name: "titre", weight: 0.6 },
    { name: "categorie", weight: 0.3 },
    { name: "alias", weight: 0.1 }
  ],
  threshold: 0.35,
  ignoreLocation: true,
  includeScore: true,
  minMatchCharLength: 2,
  shouldSort: true
});

const suggestions = fuse.search(requete.trim(), { limit: 8 });

Le champ weight favorise les correspondances trouvées dans le titre. L’option ignoreLocation empêche la proximité du début du texte de pénaliser un terme placé dans une description. minMatchCharLength évite les correspondances trop courtes, tandis que includeScore fournit une information utile pour départager ou réorganiser les résultats.

La requête doit également être nettoyée avant la recherche. Une chaîne vide ne devrait pas produire une liste arbitraire, et la longueur minimale peut augmenter progressivement pour limiter la charge pendant la saisie. Enfin, les correspondances exactes peuvent être placées avant les résultats approximatifs lorsque l’expérience exige une priorité absolue aux Correspondances parfaites.

Intégrer les suggestions dans l’interface

Dans React, l’état de la requête contrôle la valeur du champ et le calcul des suggestions. Une expression useMemo évite de reconstruire l’index ou de recalculer les résultats à chaque rendu inutile. Pour une recherche entièrement locale, un délai léger de cent à cent cinquante millisecondes peut éviter les recalculs pendant une frappe rapide.

Le composant doit aussi distinguer une liste de résultats d’une simple liste de liens. Le champ peut_received le rôle combobox, tandis que la Liste reçoit listbox et chaque proposition option. Les attributs aria-expanded, aria-controls et aria-activedescendant permettent aux technologies d’assistance de suivre la suggestion active. Les flèches directionnelles, la touche Entrée et la touche Échap doivent compléter la navigation au pointeur.

Optimiser la vitesse et le déploiement

Fuse.js fonctionne efficacement en mémoire pour un corpus de quelques milliers d’éléments, mais la création de son index devient coûteuse sur un volume important. Le move vers un Web Worker peut alors empêcher le blocage de l’interface. Une approche hybride conserve les données populaires dans le navigateur et réserve les recherches approfondies à une API.

Cette API peut appliquer la même logique de normalisation, annuler les réponses obsolètes avec un AbortController et mettre en cache les requêtes fréquentes. Pour choisir une infrastructure adaptée à une API Node.js, une comparaison des déploiements cloud aide à examiner la capacité, le coût et la ease de maintenance. Les suggestions doivent ensuite être mesurées avec le temps de réponse réel, et non seulement avec le nombre de résultats renvoyés.

Des recommandations pour une mise en service fiable

Les tests automatisés peuvent vérifier la recherche d’une faute de frappe, la gestion des accents, les requêtes vides et l’ordre des résultats. L’automatisation des contrôles avec les hooks Husky et pré-commit permet de détecter tôt une régression dans les composants, les accessibilité ou la configuration.

Créez une première version avec un corpus limité, mesurez la qualité des suggestions dans l’interface réelle et ajustez ensuite les pondérations. Déployez cette recherche floue comme une fonctionnalité distincte, surveillée et facile à faire évoluer.