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.
Création de la barre de recherche
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 zéro.
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 créer-réagir-app recherche-bar
Dans le App.js fichier, ajoutez l'élément de formulaire, y compris la balise d'entrée :
exporterdéfautfonctionApplication() {
retour (
<div>
<former>
<type d'entrée="recherche"/>
</form>
</div>
)
}
Vous devriez utiliser le useStateCrochet 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 :
importer { useState } depuis "Réagir"
exporterdéfautfonctionApplication() {
const [requête, setquery] = useState('')
constante handleChange = (e) => {
ensemblequery(e.cible.valeur)
}
retour (
<div>
<former>
<type d'entrée="recherche" 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 :
constante [état, setstate] = useState({
mettre en doute: '',
liste: []
})
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 :
constante messages = [
{
URL: '',
Mots clés: ['réagir', 'Blog'],
titre: "Comment créer une réaction recherche bar',
},
{
URL :'',
Mots clés: ['nœud','exprimer'],
titre: 'Comment se moquer des données API dans Node',
},
// plus de données ici
]
Vous pouvez aussi 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.
constante handleChange = (e) => {
constante résultats = posts.filter (post => {
si (e.valeur.cible "") messages de retour
retourposte.titre.toLowerCase().comprend(e.cible.valeur.toLowerCase())
})
setstate({
mettre en doute: e.cible.valeur,
liste: résultats
})
}
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.
exporterdéfautfonctionApplication() {
// fonction state et handleChange()
retour (
<div>
<former>
<input onChange={handleChange} value={state.query} type="recherche"/>
</form>
<ul>
{(état.requête ''? "": state.list.map (poste => {
retour <li key={post.title}>{titre de l'article}</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>
{(état.requête ''? "Aucun message ne correspond à la requête": !state.list.length? "Votre requête n'a renvoyé aucun résultat": state.list.map (poste => {
retour <li key={post.title}>{titre de l'article}</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.