Kā filtrēt meklēšanas rezultātus, rakstot ar React

Kā filtrēt meklēšanas rezultātus, rakstot ar React

Meklēšanas joslas ir lielisks veids, kā palīdzēt lietotājiem jūsu vietnē atrast vajadzīgo. Tie ir noderīgi arī analītikai, ja sekojat līdzi tam, ko meklē jūsu apmeklētāji.



Varat izmantot React, lai izveidotu meklēšanas joslu, kas filtrē un parāda datus, kad lietotājs ieraksta. Izmantojot React āķus un JavaScript karšu un filtru masīvu metodes, gala rezultāts ir atsaucīgs, funkcionāls meklēšanas lodziņš.





DIENAS VIDEO MAKEUSEOF

Meklēšana saņems lietotāja ievadi un aktivizēs filtrēšanas funkciju. Jūs varat izmantojiet bibliotēku, piemēram, Formik, lai izveidotu veidlapas programmā React , taču varat arī izveidot meklēšanas joslu no jauna.





Ja jums nav React projekta un vēlaties sekot līdzi, izveidojiet to, izmantojot komandu Create-react-app.

npx create-react-app search-bar 

Iekš App.js failu, pievienojiet formas elementu, tostarp ievades tagu:



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

Jums vajadzētu izmantot useState Reakcijas āķis un onChange notikumu, lai kontrolētu ievadi. Tātad, importējiet useState un modificējiet ievadi, lai izmantotu stāvokļa vērtību:

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

Katru reizi, kad lietotājs kaut ko ieraksta ievades elementā, rokturisMainīt atjaunina stāvokli.





Datu filtrēšana par ievades izmaiņām

Meklēšanas joslai ir jāaktivizē meklēšana, izmantojot lietotāja sniegto vaicājumu. Tas nozīmē, ka jums ir jāfiltrē dati funkcijā handleChange. Jums vajadzētu arī sekot līdzi filtrētajiem datiem stāvoklī.

kāpēc hbo max turpina sasalt?

Vispirms mainiet stāvokli, lai iekļautu datus:





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

Šādi grupējot štata vērtības, tā vietā, lai izveidotu vienu katrai vērtībai, tiek samazināts renderēšanas skaits, uzlabojot veiktspēju.

Filtrētie dati var būt jebkuri dati, ko vēlaties meklēt. Piemēram, varat izveidot emuāra ziņu paraugu sarakstu, piemēram, šo:

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
]

Jūs varat arī izgūt datus, izmantojot API no CDN vai datu bāzes.

Pēc tam mainiet funkciju handleChange(), lai filtrētu datus ikreiz, kad lietotājs ieraksta ievadi.

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 atgriež ziņas, nemeklējot tos, ja vaicājums ir tukšs. Ja lietotājs ir ierakstījis vaicājumu, tas pārbauda, ​​vai ziņas nosaukumā ir iekļauts vaicājuma teksts. Ziņas virsraksta un vaicājuma pārvēršana par mazajiem burtiem nodrošina, ka salīdzinājums nav reģistrjutīgs.

Kad filtra metode atgriež rezultātus, funkcija handleChange atjaunina stāvokli ar vaicājuma tekstu un filtrētajiem datiem.

Meklēšanas rezultātu parādīšana

Meklēšanas rezultātu parādīšana ietver cilpu pāri saraksta masīvam, izmantojot karte metodi un katra vienuma datu parādīšanu.

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

Tagā ul komponents pārbauda, ​​vai vaicājums ir tukšs. Ja tā ir, tā parāda tukšu virkni, jo tas nozīmē, ka lietotājs neko nav meklējis. Ja vēlaties meklēt jau rādīto vienumu sarakstā, noņemiet šo atzīmi.

Ja vaicājums nav tukšs, kartes metode atkārto meklēšanas rezultātus un uzskaita ziņu virsrakstus.

Varat arī pievienot atzīmi, kas parāda noderīgu ziņojumu, ja meklēšana neatgriež rezultātus.

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

Pievienojot šo ziņojumu, tiek uzlabota lietotāja pieredze, jo lietotājs netiek atstāts tukšā vietā.

Vairāk nekā vienreizēja meklēšanas parametra apstrāde

Varat izmantot React statusu un āķus kopā ar JavaScript notikumiem, lai izveidotu pielāgotu meklēšanas elementu, kas filtrē datu masīvu.

kāpēc mana Windows atslēga nedarbojas?

Filtra funkcija pārbauda tikai to, vai vaicājums atbilst vienam rekvizītam — nosaukumam — masīva objektos. Varat uzlabot meklēšanas funkcionalitāti, izmantojot loģisko operatoru VAI, lai saskaņotu vaicājumu ar citiem objekta rekvizītiem.