Kako filtrirati rezultate iskanja med tipkanjem z React

Iskalne vrstice so odličen način, da uporabnikom pomagate najti tisto, kar potrebujejo na vašem spletnem mestu. Prav tako so dobri za analitiko, če spremljate, kaj vaši obiskovalci iščejo.

React lahko uporabite za izdelavo iskalne vrstice, ki filtrira in prikazuje podatke, ko uporabnik tipka. S kljukicami React in metodami zemljevida in filtra JavaScript je končni rezultat odzivno, funkcionalno iskalno polje.

---

---

MAKEUSEOF VIDEO DNEVA

Ustvarjanje iskalne vrstice

Iskanje bo vneslo uporabnik in sprožilo funkcijo filtriranja. Ti lahko uporabite knjižnico, kot je Formik, za ustvarjanje obrazcev v Reactu , lahko pa tudi ustvarite iskalno vrstico iz nič.

Če nimate projekta React in želite slediti, ga ustvarite z ukazom create-react-app.

npx create-react-app search-bar 

V App.js dodajte element obrazca, vključno z vnosno oznako:

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

Moral bi uporabiti useState React hook in onChange dogodek za nadzor vnosa. Torej uvozite useState in spremenite vnos za uporabo vrednosti stanja:

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

Vsakič, ko uporabnik nekaj vnese znotraj vnosnega elementa, handleChange posodablja stanje.

---

---

Filtriranje podatkov o spremembi vnosa

Iskalna vrstica mora sprožiti iskanje z uporabo poizvedbe, ki jo poda uporabnik. To pomeni, da bi morali filtrirati podatke znotraj funkcije handleChange. Prav tako morate spremljati filtrirane podatke v stanju.

Najprej spremenite stanje, da bo vključevalo podatke:

---

---

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

Tako združevanje vrednosti stanja, namesto da bi ustvarili eno za vsako vrednost, zmanjša število upodobitev in izboljša zmogljivost.

Podatki, ki jih filtrirate, so lahko karkoli, po čemer želite izvesti iskanje. Ustvarite lahko na primer seznam vzorčnih objav v spletnem dnevniku, kot je ta:

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 
  ] 

Lahko tudi pridobivanje podatkov z uporabo API-ja iz CDN ali baze podatkov.

Nato spremenite funkcijo handleChange(), da filtrira podatke vsakič, ko uporabnik vnese vnos.

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

Funkcija vrne objave brez iskanja po njih, če je poizvedba prazna. Če je uporabnik vnesel poizvedbo, preveri, ali naslov objave vključuje besedilo poizvedbe. Pretvorba naslova objave in poizvedbe v male črke zagotavlja, da primerjava ne razlikuje med velikimi in malimi črkami.

Ko metoda filtra vrne rezultate, funkcija handleChange posodobi stanje z besedilom poizvedbe in filtriranimi podatki.

Prikaz rezultatov iskanja

Prikaz rezultatov iskanja vključuje zanko po matriki seznama z uporabo zemljevid način in prikaz podatkov za vsako postavko.

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

Znotraj oznake ul komponenta preveri, ali je poizvedba prazna. Če je, prikaže prazen niz, ker to pomeni, da uporabnik ni iskal ničesar. Če želite iskati po seznamu elementov, ki jih že prikazujete, odstranite to kljukico.

Če poizvedba ni prazna, metoda zemljevida ponovi rezultate iskanja in navede naslove objav.

Dodate lahko tudi kljukico, ki prikaže koristno sporočilo, če iskanje ne vrne rezultatov.

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

Dodajanje tega sporočila izboljša uporabniško izkušnjo, ker uporabnik ne gleda v prazen prostor.

kako se vrniti v niz

Ravnanje z iskalnim parametrom Več kot enkrat

Za ustvarjanje iskalnega elementa po meri, ki filtrira niz podatkov, lahko uporabite stanje React in kavlje skupaj z dogodki JavaScript.

Funkcija filtra samo preveri, ali se poizvedba ujema z eno lastnostjo – naslovom – v objektih znotraj matrike. Funkcionalnost iskanja lahko izboljšate z uporabo logičnega operatorja ALI za ujemanje poizvedbe z drugimi lastnostmi v objektu.