Comment filtrer les résultats de la recherche lors de la saisie avec React

Comment filtrer les résultats de la recherche lors de la saisie avec React

Les barres de recherche sont un excellent moyen d'aider les utilisateurs à trouver ce dont ils ont besoin sur votre site Web. Ils sont également utiles pour l'analyse si vous gardez une trace de ce que vos visiteurs recherchent.





Vous pouvez utiliser React pour créer une barre de recherche qui filtre et affiche les données au fur et à mesure que l'utilisateur tape. Avec les hooks React et les méthodes JavaScript map et filter array, le résultat final est un champ de recherche réactif et fonctionnel.



UTILISEZ LA VIDÉO DU JOUR

La recherche prendra l'entrée d'un utilisateur et déclenchera la fonction de filtrage. Tu peux utiliser une bibliothèque comme Formik pour créer des formulaires dans React , mais vous pouvez également créer une barre de recherche à partir de rien.





Si vous n'avez pas de projet React et que vous souhaitez suivre, créez-en un à l'aide de la commande create-react-app.

npx create-react-app search-bar

Dans le App.js fichier, ajoutez l'élément de formulaire, y compris la balise d'entrée :



export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
}

Vous devriez utiliser le useState Crochet de réaction et le sur le changement événement pour contrôler l'entrée. Alors, importez useState et modifiez l'entrée pour utiliser la valeur d'état :

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  }

Chaque fois qu'un utilisateur tape quelque chose à l'intérieur de l'élément d'entrée, handleChange met à jour l'état.



Filtrage des données lors d'un changement d'entrée

La barre de recherche doit déclencher une recherche à l'aide de la requête fournie par l'utilisateur. Cela signifie que vous devez filtrer les données à l'intérieur de la fonction handleChange. Vous devez également suivre les données filtrées dans l'état.

Tout d'abord, modifiez l'état pour inclure les données :



const [state, setstate] = useState({ 
  query: '', 
  list: [] 
})

Regrouper les valeurs d'état de cette manière, au lieu d'en créer une pour chaque valeur, réduit le nombre de rendus, améliorant ainsi les performances.

Les données que vous filtrez peuvent être tout ce sur quoi vous souhaitez effectuer une recherche. Par exemple, vous pouvez créer une liste d'exemples d'articles de blog comme celui-ci :

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ]

Vous pouvez également récupérer les données à l'aide d'une API à partir d'un CDN ou d'une base de données.

Ensuite, modifiez la fonction handleChange() pour filtrer les données chaque fois que l'utilisateur tape dans l'entrée.

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
}

La fonction renvoie les messages sans les parcourir si la requête est vide. Si un utilisateur a saisi une requête, il vérifie si le titre du message inclut le texte de la requête. La conversion du titre du message et de la requête en minuscules garantit que la comparaison est insensible à la casse.

Une fois que la méthode de filtrage a renvoyé les résultats, la fonction handleChange met à jour l'état avec le texte de la requête et les données filtrées.

Affichage des résultats de la recherche

L'affichage des résultats de la recherche implique une boucle sur le tableau de la liste à l'aide de la carte méthode et afficher les données pour chaque élément.

comment tester si votre disque dur est en panne 
export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
}

À l'intérieur de la balise ul, le composant vérifie si la requête est vide. Si c'est le cas, il affiche une chaîne vide car cela signifie que l'utilisateur n'a rien recherché. Si vous souhaitez effectuer une recherche dans une liste d'éléments que vous affichez déjà, décochez cette case.

Si la requête n'est pas vide, la méthode map parcourt les résultats de la recherche et répertorie les titres des articles.

Vous pouvez également ajouter une coche qui affiche un message utile si la recherche ne renvoie aucun résultat.

<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul>

L'ajout de ce message améliore l'expérience utilisateur car l'utilisateur n'est pas laissé devant un espace vide.

Gestion de plusieurs paramètres de recherche

Vous pouvez utiliser l'état et les crochets React, ainsi que les événements JavaScript, pour créer un élément de recherche personnalisé qui filtre un tableau de données.

La fonction de filtre vérifie uniquement si la requête correspond à une propriété (titre) dans les objets à l'intérieur du tableau. Vous pouvez améliorer la fonctionnalité de recherche en utilisant l'opérateur logique OU pour faire correspondre la requête à d'autres propriétés de l'objet.