Kako filtrirati rezultate pretraživanja dok tipkate s Reactom

Trake za pretraživanje izvrstan su način da korisnicima pomognete pronaći ono što im je potrebno na vašoj web stranici. Također su dobri za analitiku ako pratite što vaši posjetitelji traže.

Možete koristiti React za izradu trake za pretraživanje koja filtrira i prikazuje podatke dok korisnik upisuje. Uz React kuke i metode mapiranja JavaScripta i polja filtera, krajnji rezultat je odgovarajući, funkcionalni okvir za pretraživanje.

---

---

MAKEUSEOF VIDEO DANA

Stvaranje trake za pretraživanje

Pretraživanje će uzeti unos od korisnika i pokrenuti funkciju filtriranja. Možeš koristiti biblioteku kao što je Formik za stvaranje obrazaca u Reactu , ali također možete stvoriti traku za pretraživanje od nule.

Ako nemate React projekt i želite ga pratiti, izradite ga pomoću naredbe create-react-app.

postoji li način za oporavak izbrisanih Facebook poruka

npx create-react-app search-bar 

u App.js datoteku, dodajte element obrasca, uključujući oznaku unosa:

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

Trebali biste koristiti useState Reagirajte kuku i onChange događaj za kontrolu unosa. Dakle, uvezite useState i modificirajte unos tako da koristi vrijednost 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> 
    ) 
  } 

Svaki put kada korisnik upiše nešto unutar ulaznog elementa, handleChange ažurira stanje.

---

---

Filtriranje podataka o promjeni unosa

Traka za pretraživanje trebala bi pokrenuti pretraživanje pomoću upita koji korisnik unese. To znači da biste trebali filtrirati podatke unutar funkcije handleChange. Također biste trebali pratiti filtrirane podatke u stanju.

Najprije promijenite stanje tako da uključuje podatke:

---

---

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

Ovako grupiranje vrijednosti stanja, umjesto stvaranja jedne za svaku vrijednost, smanjuje broj iscrtavanja, poboljšavajući performanse.

Podaci koje filtrirate mogu biti bilo što što želite izvršiti pretraživanje. Na primjer, možete izraditi popis oglednih postova na blogu kao što je ovaj:

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 
  ] 

Također možete dohvaćanje podataka pomoću API-ja iz CDN-a ili baze podataka.

Zatim promijenite funkciju handleChange() da filtrira podatke kad god korisnik upiše unutar unosa.

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 vraća objave bez pretraživanja ako je upit prazan. Ako je korisnik upisao upit, provjerava sadrži li naslov objave tekst upita. Pretvaranje naslova posta i upita u mala slova osigurava da usporedba ne razlikuje velika i mala slova.

Nakon što metoda filtera vrati rezultate, funkcija handleChange ažurira stanje s tekstom upita i filtriranim podacima.

Prikaz rezultata pretraživanja

Prikaz rezultata pretraživanja uključuje ponavljanje niza popisa pomoću karta način i prikaz podataka za svaku stavku.

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

Unutar ul oznake, komponenta provjerava da li je upit prazan. Ako jest, prikazuje prazan niz jer to znači da korisnik nije ništa tražio. Ako želite pretraživati ​​popis stavki koje već prikazujete, uklonite ovu oznaku.

Ako upit nije prazan, metoda karte ponavlja rezultate pretraživanja i navodi naslove postova.

Također možete dodati oznaku koja prikazuje korisnu poruku ako pretraživanje ne vrati rezultate.

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

Dodavanje ove poruke poboljšava korisničko iskustvo jer korisnik ne gleda u prazan prostor.

Rukovanje parametrom pretraživanja više od jednom

Možete koristiti React stanje i kuke, zajedno s JavaScript događajima, za stvaranje prilagođenog elementa pretraživanja koji filtrira niz podataka.

kako provjeriti iphone na zlonamjeran softver

Funkcija filtra samo provjerava podudara li se upit s jednim svojstvom—naslovom—u objektima unutar polja. Funkcionalnost pretraživanja možete poboljšati korištenjem logičkog ILI operatora za podudaranje upita s drugim svojstvima u objektu.