Hvordan filtrere søkeresultater mens du skriver med React

Søkefelt er en fin måte å hjelpe brukere med å finne det de trenger på nettstedet ditt. De er også gode for analyser hvis du holder styr på hva de besøkende søker etter.

Du kan bruke React til å bygge en søkelinje som filtrerer og viser data mens brukeren skriver. Med React-hooks og JavaScript-kart- og filterarraymetodene er sluttresultatet en responsiv, funksjonell søkeboks.

Opprette søkefeltet

Søket vil ta innspill fra en bruker og utløse filtreringsfunksjonen. Du kan bruk et bibliotek som Formik til å lage skjemaer i React, men du kan også lage en søkelinje fra bunnen av.

Hvis du ikke har et React-prosjekt og vil følge med, lag et ved å bruke create-react-app-kommandoen.

npx skape-reager-app Søk-bar

I App.js fil, legg til skjemaelementet, inkludert input-taggen:

eksportmisligholdefunksjonApp() {
komme tilbake (
<div>
<form>
<input type="Søk"/>
</form>
</div>
 )
}

Du bør bruke useStateReagerkrok og på Endre hendelse for å kontrollere inngangen. Så importer useState og endre inndataene for å bruke tilstandsverdien:

import { useState } fra "Reagere"
eksportmisligholdefunksjonApp() {
 const [query, setquery] = useState('')
konst handleChange = (e) => {
setquery(e.mål.verdi)
 }
komme tilbake (
<div>
<form>
<input type="Søk" value={query} onChange={handleChange}/>
</form>
</div>
 )
 }

Hver gang en bruker skriver noe inne i input-elementet, handleEndre oppdaterer staten.

Filtrering av data ved inngangsendring

Søkefeltet skal utløse et søk ved å bruke søket som brukeren oppgir. Dette betyr at du bør filtrere dataene inne i handleChange-funksjonen. Du bør også holde styr på de filtrerte dataene i staten.

Først må du endre tilstanden for å inkludere dataene:

konst [state, setstate] = useState({
 spørsmål: '',
liste: []
})

Ved å gruppere tilstandsverdiene som dette, i stedet for å lage én for hver verdi, reduseres antallet gjengivelser, noe som forbedrer ytelsen.

Dataene du filtrerer kan være alt du vil søke etter. Du kan for eksempel lage en liste over eksempler på blogginnlegg som dette:

konst innlegg = [
 { 
 url: '',
 tags: ['reagere', 'blogg'],
 tittel: 'Hvordan skape en reaksjon Søk bar',
 },
 {
 url:'',
 tags: ['node','uttrykke'],
 tittel: 'Hvordan håne api-data i Node',
 },
// mer data her
 ]

Du kan også hente dataene ved hjelp av en API fra et CDN eller en database.

Deretter endrer du handleChange()-funksjonen for å filtrere dataene hver gang brukeren skriver inn i input.

konst handleChange = (e) => {
konst resultater = posts.filter (post => {
 if (e.target.value "") returnere innlegg
komme tilbakepost.tittel.tolowerCase().inkluderer(e.mål.verdi.tolowerCase())
 })
 setstate({
spørsmål: e.mål.verdi,
liste: resultater
 })
}

Funksjonen returnerer innleggene uten å søke gjennom dem hvis søket er tomt. Hvis en bruker har skrevet inn en spørring, sjekker den om posttittelen inkluderer spørringsteksten. Konvertering av innleggstittelen og spørringen til små bokstaver sikrer at sammenligningen ikke skiller mellom store og små bokstaver.

Når filtermetoden returnerer resultatene, oppdaterer handleChange-funksjonen tilstanden med spørringsteksten og de filtrerte dataene.

Viser søkeresultatene

Å vise søkeresultatene innebærer å gå over listen med kart metode og visning av dataene for hvert element.

eksportmisligholdefunksjonApp() {
// state og handleChange() funksjon
komme tilbake (
<div>
<form>
<input onChange={handleChange} verdi={state.query} type="Søk"/>
</form>
<ul>
 {(stat.spørring ''? "": state.list.map (post => {
 komme tilbake <li key={post.title}>{post.title}</li>
 }))}
</ul>
</div>
 )
}

Inne i ul-taggen sjekker komponenten om spørringen er tom. Hvis det er det, viser den en tom streng fordi det betyr at brukeren ikke har søkt etter noe. Hvis du vil søke gjennom en liste over elementer du allerede viser, fjern denne haken.

Hvis søket ikke er tomt, itererer kartmetoden over søkeresultatene og viser posttitlene.

Du kan også legge til en hake som viser en nyttig melding hvis søket ikke gir resultater.

<ul>
 {(stat.spørring ''? "Ingen innlegg samsvarer med søket": !stat.liste.lengde? "Søket ditt ga ingen resultater": state.list.map (post => {
 komme tilbake <li key={post.title}>{post.title}</li>
 }))}
</ul>

Å legge til denne meldingen forbedrer brukeropplevelsen fordi brukeren ikke ser på et tomt område.

Håndtering av søkeparameter mer enn én gang

Du kan bruke React state og hooks, sammen med JavaScript-hendelser, for å lage et tilpasset søkeelement som filtrerer en datamatrise.

Filterfunksjonen sjekker bare om spørringen samsvarer med én egenskap – tittel – i objektene inne i matrisen. Du kan forbedre søkefunksjonaliteten ved å bruke den logiske OR-operatoren for å matche spørringen med andre egenskaper i objektet.