Comment créer une barre de recherche dans React js : un guide complet

by

L'inclusion d'une barre de recherche dans une application React peut améliorer considérablement la navigation et l'accessibilité des utilisateurs. C'est une fonctionnalité qui permet aux utilisateurs de trouver rapidement les informations dont ils ont besoin. Cet article vous guidera tout au long du processus d'ajout d'une barre de recherche dans React, de l'implémentation de base à la gestion de scénarios plus complexes.

Implémentation de la barre de recherche de base dans React

Étape 1 : Création du composant de recherche

La première étape consiste à créer un composant de barre de recherche de base. Ce composant comprend un champ de saisie dans lequel les utilisateurs peuvent saisir leurs requêtes.

import React, { useState } from 'react';

function SearchBar({ onSearch }) {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearchChange = (e) => {
    setSearchTerm(e.target.value);
    onSearch(e.target.value);
  };

  return (
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={handleSearchChange}
    />
  );
}

Dans ce composant, onSearch est un accessoire de fonction qui gérera la logique de recherche.

Étape 2 : implémentation de la logique de recherche

Maintenant, vous devez implémenter la fonction qui gérera la recherche. Cette fonction filtrera les données en fonction du terme de recherche.

function App() {
  const data = [...]; // Your data array

  const handleSearch = (searchTerm) => {
    const filteredData = data.filter(item =>
      item.toLowerCase().includes(searchTerm.toLowerCase())
    );
    console.log(filteredData);
  };

  return (
    <div>
      <SearchBar onSearch={handleSearch} />
      {/* Display your data here */}
    </div>
  );
}

In handleSearch, les données sont filtrées en fonction du terme de recherche, en ignorant la sensibilité à la casse.

Fonctionnalités avancées de la barre de recherche

1. Anti-rebond des entrées utilisateur

Dans les applications du monde réel, vous devez souvent gérer de grands ensembles de données. La mise en œuvre de l'anti-rebond peut optimiser la fonctionnalité de recherche en réduisant le nombre de recherches effectuées au fur et à mesure que l'utilisateur tape.

Exemple: Ajout de l'anti-rebond

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

function SearchBar({ onSearch }) {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    onSearch(debouncedSearchTerm);
  }, [debouncedSearchTerm, onSearch]);

  return (
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
}

Ici, useDebounce est un hook personnalisé qui retarde la définition du terme de recherche, réduisant ainsi la fréquence des opérations de recherche.

2. Rechercher la saisie semi-automatique

La saisie semi-automatique améliore l'expérience utilisateur en fournissant des suggestions au fur et à mesure que l'utilisateur tape.

Exemple: Implémentation de la saisie semi-automatique

function SearchBar({ onSearch, suggestions }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [showSuggestions, setShowSuggestions] = useState(false);

  const handleChange = (e) => {
    setSearchTerm(e.target.value);
    onSearch(e.target.value);
    setShowSuggestions(true);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleChange}
        onBlur={() => setShowSuggestions(false)}
        onFocus={() => setShowSuggestions(true)}
      />
      {showSuggestions && (
        <ul>
          {suggestions.map((suggestion, index) => (
            <li key={index} onClick={() => setSearchTerm(suggestion)}>
              {suggestion}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Dans cet exemple, le SearchBar Le composant affiche une liste de suggestions lorsque l'utilisateur se concentre sur le champ de saisie.

Défis et solutions

1. Gestion de grands ensembles de données

Problème : les opérations de recherche dans de grands ensembles de données peuvent entraîner des problèmes de performances.

Solution: optez pour la recherche côté serveur ou utilisez des algorithmes et des structures de données efficaces (comme les essais) pour gérer la logique de recherche.

  1. Effets secondaires anti-rebond

Problème: La mise en œuvre de l'anti-rebond peut conduire à des résultats de recherche obsolètes.

Solution : Assurez-vous que la valeur anti-rebond est toujours synchronisée avec la dernière entrée utilisateur. Utilisez React useEffect pour gérer correctement les effets secondaires des valeurs anti-rebond.

2. Problèmes d'accessibilité

Problème : La saisie semi-automatique et les résultats de recherche dynamiques peuvent constituer un défi en termes d'accessibilité.

Solution : assurez-vous que votre composant de recherche est accessible en implémentant les rôles et propriétés ARIA (Accessible Rich Internet Applications). Utiliser aria-labels et gérez correctement la mise au point pour les lecteurs d'écran.

Comment gérer le rebond pour synchroniser les résultats de recherche

Cet exemple montrera comment garantir que la valeur anti-rebond reste synchronisée avec la dernière entrée utilisateur, à l'aide de React. useEffect pour gérer les effets secondaires des valeurs anti-rebond.

Tout d’abord, nous allons créer un hook personnalisé pour anti-rebondir la valeur :

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // Effect re-runs only if value or delay changes

  return debouncedValue;
}

In useDebounce, nous mettons en place un setTimeout pour mettre à jour le debouncedValue après le délai spécifié. La fonction de nettoyage des effets garantit que le délai d'attente est effacé si le composant est démonté ou si la valeur change avant l'expiration du délai.

Ensuite, nous créons le SearchBar composant:

function SearchBar({ onSearch }) {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500); // Debounce for 500ms

  useEffect(() => {
    if (debouncedSearchTerm) {
      onSearch(debouncedSearchTerm);
    }
  }, [debouncedSearchTerm, onSearch]); // Effect re-runs when debouncedSearchTerm changes

  return (
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
}

Dans ce composant, nous utilisons le useDebounce crochet pour faire rebondir le searchTerm. Nous utilisons ensuite un useEffect crochet pour appeler le onSearch fonctionner à chaque fois debouncedSearchTerm changements. Cela garantit que la recherche est effectuée avec la valeur anti-rebond, réduisant ainsi la fréquence des opérations de recherche, en particulier en cas de saisie rapide par l'utilisateur.

Enfin, mettre en œuvre le App composant

function App() {
  const handleSearch = (searchTerm) => {
    console.log('Searching for:', searchTerm);
    // Perform search operation here
  };

  return (
    <div>
      <SearchBar onSearch={handleSearch} />
      {/* Results and other components */}
    </div>
  );
}

In App, handleSearch la fonction est appelée avec le terme de recherche anti-rebond. Cette configuration garantit que la recherche est effectuée efficacement, réduisant ainsi les calculs et les appels d'API inutiles.

L'ajout d'une barre de recherche dans React est plus qu'un simple élément d'interface utilisateur ; il s'agit d'améliorer l'expérience utilisateur et d'assurer une récupération efficace des données. En comprenant les bases, en implémentant des fonctionnalités avancées telles que l'anti-rebond et la saisie semi-automatique, et en relevant les défis courants, vous pouvez créer un composant de recherche puissant dans votre application React. Ce guide fournit une base solide, mais n'oubliez pas que les meilleures solutions sont souvent adaptées aux besoins spécifiques de votre application et de ses utilisateurs.