Sådan filtreres søgeresultater, mens du skriver med React

Sådan filtreres søgeresultater, mens du skriver med React

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.



MAKEUSE AF DAGENS VIDEO

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 create-react-app search-bar

I den App.js fil, skal du tilføje formularelementet, inklusive input-tagget:



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

Du bør bruge useState Reaktionskrog og på Skift hændelse for at styre input. Så importer useState og rediger inputtet for at bruge tilstandsværdien:

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> 
    ) 
  }

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:



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

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:

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 
  ]

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.

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 
    }) 
}

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.

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> 
  ) 
}

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.

opret bootable linux usb på mac

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> 
  {(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>

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.