Recherche intelligente avec FlexSearch et Material-UI dans React

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled flexsearch

// utils/articleSearchIndex.ts
import leven from "leven";
import { Article } from "../components/Search";
import FlexSearch from "flexsearch";

// Créer un index FlexSearch
const index = new FlexSearch.Document({
  document: {
    id: "id",
    index: ["title", "content"], // Champs à indexer pour la recherche
    store: ["id", "title", "content"], // Champs à récupérer dans les résultats
  },
  language: "fr", // Support linguistique pour la tokenisation
  tokenize: "forward", // Tokenisation pour l'autocomplétion
  encoder: "simple", // Encodage simplifié pour la recherche
  threshold: 3, // Tolérance pour la recherche approximative
  resolution: 5, // Résolution plus élevée pour des résultats plus précis
});

// Ajouter des données à l'index
export const addDataToIndex = (data: Article[]) => {
  data.forEach((item) => {
    index.add(item);
  });
};

// Fonction de recherche dans l'index
export const searchIndex = async (query: string) => {
  try {
    const result = await (index as any).searchAsync(query, {
      index: ["title", "content"],
      suggest: true, // Suggestions d'autocomplétion
      pluck: "title", // On ne récupère que le titre
      enrich: true,   // Enrichir le format des résultats
    });

    return result;
  } catch (error) {
    console.error("Erreur lors de la tokenisation avec FlexSearch :", error);
    return [];
  }
};

// components/Search.tsx
import { useState, useEffect, ChangeEvent } from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import { addDataToIndex, searchIndex } from "../utils/articleSearchIndex";

// Définir l'interface Article
export interface Article {
  id: number;
  title: string;
  content: string;
}

// Données d'exemple pour remplir l'index
const articles: Article[] = [
  { id: 1, title: "Comment utiliser FlexSearch", content: "Un guide sur l'utilisation de FlexSearch pour la recherche de documents." },
  { id: 2, title: "Créer une autocomplétion", content: "Étapes pour implémenter l'autocomplétion avec FlexSearch." },
  { id: 3, title: "React avec FlexSearch", content: "Intégrer FlexSearch dans une application React." },
];

const Search = () => {
  const [query, setQuery] = useState<string>("");
  const [suggestions, setSuggestions] = useState<Article[]>([]);

  // Remplir l'index FlexSearch lors du montage du composant
  useEffect(() => {
    addDataToIndex(articles);
  }, []);

  // Gérer les modifications de saisie dans la recherche
  const handleSearch = (_: ChangeEvent<{}>, value: string) => {
    setQuery(value);
    const searchResults = searchIndex(value);

    const formattedResults = searchResults.map((result) => result.doc);

    setSuggestions(formattedResults);
  };

  return (
    <Autocomplete
      freeSolo
      options={suggestions}
      filterOptions={(x) => x} // Désactiver le filtrage côté client
      getOptionLabel={(option: Article | string) =>
        typeof option === "string" ? option : option.title
      }
      inputValue={query}
      onInputChange={handleSearch}
      renderInput={(params) => (
        <TextField {...params} label="Rechercher des articles" variant="outlined" />
      )}
    />
  );
};

export default Search;

// App.js
import React from "react";
import Search from "./components/Search";

const App = () => {
  return (
    <div>
      <h1>Recherche FlexSearch</h1>
      <Search />
    </div>
  );
};

export default App;

npm install lodash

import { debounce } from 'lodash';
import { useCallback } from "react";

// Gérer la recherche avec un délai (debounced)
const handleDebouncedSearch = useCallback(
  debounce(async (value: string) => {
    const searchResults = await searchIndex(value);
    setSuggestions(searchResults);
  }, 500),
  []
);

const handleSearch = (_: ChangeEvent<{}>, value: string) => {
  setQuery(value);
  handleDebouncedSearch(value);
};

import leven from "leven";

// Suggérer des corrections en utilisant la distance de Levenshtein
export const suggestIndex = (query: string, data: Article[]) => {
  return data.filter((item: Article) => {
    const maxDistance = item.title.length - leven(query.toLocaleLowerCase(), item.title.toLocaleLowerCase());
    return maxDistance >= 6;
  });
};

const handleDebouncedSearch = useCallback(
  debounce(async (value: string) => {
    let searchResults = await searchIndex(value);

    if (searchResults.length === 0) {
      searchResults = suggestIndex(value, articles);
    } else {
      searchResults = searchResults.map((r) => r.doc);
    }

    setSuggestions(searchResults);
  }, 500),
  []
);