Cum să filtrați rezultatele căutării în timp ce scrieți cu React

Barele de căutare sunt o modalitate excelentă de a ajuta utilizatorii să găsească ceea ce au nevoie pe site-ul dvs. web. De asemenea, sunt bune pentru analiză dacă ține evidența ceea ce caută vizitatorii tăi.

Puteți folosi React pentru a crea o bară de căutare care filtrează și afișează date pe măsură ce utilizatorul introduce. Cu cârligele React și cu hărțile JavaScript și cu metodele de matrice de filtrare, rezultatul final este o casetă de căutare receptivă și funcțională.

REALIZAREA VIDEOCLIPULUI ZILEI

Crearea barei de căutare

Căutarea va prelua intrarea de la un utilizator și va declanșa funcția de filtrare. Poti utilizați o bibliotecă precum Formik pentru a crea formulare în React , dar puteți crea și o bară de căutare de la zero.

Dacă nu aveți un proiect React și doriți să urmați, creați unul folosind comanda create-react-app.

cum se dezinstalează Skype pentru afaceri

npx create-react-app search-bar

În App.js fișier, adăugați elementul de formular, inclusiv eticheta de intrare:

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

Ar trebui să utilizați useState Cârlig de reacție si cu privire la schimbările eveniment pentru a controla intrarea. Deci, importați useState și modificați intrarea pentru a utiliza valoarea de stare:

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

De fiecare dată când un utilizator tasta ceva în interiorul elementului de intrare, handleChange actualizează starea.

Filtrarea datelor la modificarea intrării

Bara de căutare ar trebui să declanșeze o căutare folosind interogarea furnizată de utilizator. Aceasta înseamnă că ar trebui să filtrați datele din funcția handleChange. De asemenea, ar trebui să urmăriți datele filtrate în stat.

Mai întâi, modificați starea pentru a include datele:

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

Gruparea valorilor de stat astfel, în loc să creeze una pentru fiecare valoare, reduce numărul de randări, îmbunătățind performanța.

Datele pe care le filtrați pot fi orice pe care doriți să efectuați o căutare. De exemplu, puteți crea o listă de eșantion de postări de blog precum aceasta:

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 
  ]

Poti de asemenea preluați datele folosind un API dintr-un CDN sau dintr-o bază de date.

Apoi, modificați funcția handleChange() pentru a filtra datele ori de câte ori utilizatorul tasta în interiorul intrării.

bucla de pornire Windows 10 după resetare

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

Funcția returnează postările fără a căuta prin ele dacă interogarea este goală. Dacă un utilizator a tastat o interogare, acesta verifică dacă titlul postării include textul interogării. Convertirea titlului postării și a interogării în litere mici asigură că comparația nu face distincție între majuscule și minuscule.

Odată ce metoda de filtrare returnează rezultatele, funcția handleChange actualizează starea cu textul interogării și datele filtrate.

Afișarea rezultatelor căutării

Afișarea rezultatelor căutării implică trecerea în buclă peste matricea listei folosind Hartă metoda și afișarea datelor pentru fiecare articol.

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

În interiorul etichetei ul, componenta verifică dacă interogarea este goală. Dacă este, afișează un șir gol, deoarece înseamnă că utilizatorul nu a căutat nimic. Dacă doriți să căutați într-o listă de articole pe care o afișați deja, eliminați această bifare.

Dacă interogarea nu este goală, metoda hărții iterează peste rezultatele căutării și afișează titlurile postărilor.

De asemenea, puteți adăuga o verificare care afișează un mesaj util dacă căutarea nu returnează niciun rezultat.

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

Adăugarea acestui mesaj îmbunătățește experiența utilizatorului, deoarece utilizatorul nu este lăsat să se uite la un spațiu gol.

Gestionarea mai multor parametru de căutare

Puteți utiliza starea și cârligele React, împreună cu evenimente JavaScript, pentru a crea un element de căutare personalizat care filtrează o matrice de date.

telefonul meu are o adresă IP

Funcția de filtru verifică doar dacă interogarea se potrivește cu o proprietate — titlul — din obiectele din interiorul matricei. Puteți îmbunătăți funcționalitatea de căutare folosind operatorul logic OR pentru a potrivi interogarea cu alte proprietăți din obiect.