Comment MDN met en œuvre l’autocomplétion de recherche

• Quand un utilisateur veut rechercher quelque chose, téléchargement d’un index de 11 690 titres d’articles pour effectuer la recherche en local

→ fichier JSON de 144 KB compressé avec Brotli (title, url)

→ au mouseover, au focus sur le champ de recherche, ou lorsqu’un / est saisi n’importe où dans le document, cela est interprété comme le début d’une recherche et déclenche le téléchargement des fichiers (fichier de données et fichier des fonctions de recherche)

• Après le téléchargement du fichier de données, construction de l’index avec la bibliothèque FlexSearch et gestion de l’UI avec downshift

→ FlexSearch : bibliothèque de recherche full-text rapide

→ downshift : composant d’autocomplétion pour React

→ L’ordre d’affichage initial des résultats est déterminé côté serveur lors de la génération des données JSON, en les triant selon le PV, puis restitué dans cet ordre