Søgelinjer er en fantastisk måde at hjælpe brugerne med at finde det, de har brug for på dit websted. De er også gode til analyser, hvis du holder styr på, hvad dine besøgende søger efter.
Du kan bruge React til at bygge en søgelinje, der filtrerer og viser data, mens brugeren skriver. Med React hooks og JavaScript-kort- og filterarray-metoderne er slutresultatet et responsivt, funktionelt søgefelt.
Oprettelse af søgelinjen
Søgningen vil tage input fra en bruger og udløse filtreringsfunktionen. Du kan bruge et bibliotek som Formik til at oprette formularer i React, men du kan også oprette en søgelinje fra bunden.
Hvis du ikke har et React-projekt og vil følge med, skal du oprette et ved hjælp af create-react-app-kommandoen.
npx skab-reager-app Søg-bar
I den App.js fil, skal du tilføje formularelementet, inklusive input-tagget:
eksportStandardfungereApp() {
Vend tilbage (
<div>
<form>
<input type="Søg"/>
</form>
</div>
)
}
Du bør bruge useStateReaktionskrog og på Skift hændelse for at styre input. Så importer useState og rediger inputtet for at bruge tilstandsværdien:
importere { useState } fra "Reagere"
eksportStandardfungereApp() {
const [query, setquery] = useState('')
konst handleChange = (e) => {
sætquery(e.mål.værdi)
}
Vend tilbage (
<div>
<form>
<input type="Søg" value={query} onChange={handleChange}/>
</form>
</div>
)
}
Hver gang en bruger skriver noget inde i input-elementet, håndtag Skift opdaterer staten.
Filtrering af data ved inputændring
Søgelinjen skal udløse en søgning ved hjælp af den forespørgsel, som brugeren angiver. Det betyder, at du skal filtrere dataene inde i handleChange-funktionen. Du bør også holde styr på de filtrerede data i staten.
Først skal du ændre tilstanden til at inkludere dataene:
konst [state, setstate] = useState({
forespørgsel: '',
liste: []
})
Ved at samle tilstandsværdierne på denne måde, i stedet for at oprette en for hver værdi, reduceres antallet af gengivelser, hvilket forbedrer ydeevnen.
De data, du filtrerer, kan være alt, hvad du vil udføre en søgning på. For eksempel kan du oprette en liste over eksempler på blogindlæg som denne:
konst indlæg = [
{
url: '',
tags: ['reagere', 'blog'],
titel: 'Hvordan skab en reaktion Søg bar',
},
{
url:'',
tags: ['node','udtrykke'],
titel: 'Sådan håner du api-data i Node',
},
// flere data her
]
Du kan også hente data ved hjælp af en API fra et CDN eller en database.
Derefter skal du ændre handleChange()-funktionen for at filtrere dataene, når brugeren skriver inde i inputtet.
konst handleChange = (e) => {
konst resultater = posts.filter (post => {
if (e.target.value "") returnere indlæg
Vend tilbagestolpe.titel.tolowerCase().inkluderer(e.mål.værdi.tolowerCase())
})
setstate({
forespørgsel: e.mål.værdi,
liste: resultater
})
}
Funktionen returnerer indlæggene uden at søge i dem, hvis forespørgslen er tom. Hvis en bruger har skrevet en forespørgsel, tjekker den, om indlægstitlen indeholder forespørgselsteksten. Konvertering af indlægstitlen og forespørgslen til små bogstaver sikrer, at sammenligningen ikke skelner mellem store og små bogstaver.
Når filtermetoden returnerer resultaterne, opdaterer handleChange-funktionen tilstanden med forespørgselsteksten og de filtrerede data.
Visning af søgeresultater
Visning af søgeresultaterne indebærer at sløjfe over listearrayet ved hjælp af kort metode og visning af data for hvert element.
eksportStandardfungereApp() {
// state og handleChange() funktion
Vend tilbage (
<div>
<form>
<input onChange={handleChange} værdi={state.forespørgsel} type="Søg"/>
</form>
<ul>
{(stat.forespørgsel ''? "": state.list.map (post => {
Vend tilbage <li key={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Inde i ul-tagget kontrollerer komponenten, om forespørgslen er tom. Hvis det er det, viser den en tom streng, fordi det betyder, at brugeren ikke har søgt efter noget. Hvis du vil søge gennem en liste over elementer, du allerede viser, skal du fjerne denne markering.
Hvis forespørgslen ikke er tom, gentager kortmetoden søgeresultaterne og viser indlægstitlerne.
Du kan også tilføje et flueben, der viser en nyttig besked, hvis søgningen ikke giver resultater.
<ul>
{(stat.forespørgsel ''? "Ingen indlæg matcher forespørgslen": !stat.liste.længde? "Din forespørgsel gav ingen resultater": state.list.map (post => {
Vend tilbage <li key={post.title}>{post.title}</li>
}))}
</ul>
Tilføjelse af denne besked forbedrer brugeroplevelsen, fordi brugeren ikke efterlades og kigger på et tomt felt.
Håndtering af søgeparameter mere end én gang
Du kan bruge React-tilstand og hooks sammen med JavaScript-hændelser til at oprette et tilpasset søgeelement, der filtrerer et dataarray.
Filterfunktionen kontrollerer kun, om forespørgslen matcher én egenskab – titel – i objekterne inde i arrayet. Du kan forbedre søgefunktionaliteten ved at bruge den logiske OR-operator til at matche forespørgslen med andre egenskaber i objektet.
