Hur man filtrerar sökresultat medan du skriver med React

Hur man filtrerar sökresultat medan du skriver med React

Sökfält är ett utmärkt sätt att hjälpa användare att hitta det de behöver på din webbplats. De är också bra för analys om du håller koll på vad dina besökare söker efter.





Du kan använda React för att bygga ett sökfält som filtrerar och visar data när användaren skriver. Med React hooks och JavaScript-kartan och filteruppsättningsmetoderna är slutresultatet en responsiv, funktionell sökruta.





MAKEUSE AV DAGENS VIDEO

Sökningen tar input från en användare och utlöser filtreringsfunktionen. Du kan använd ett bibliotek som Formik för att skapa formulär i React , men du kan också skapa ett sökfält från början.





roliga saker att göra med en hallon pi

Om du inte har ett React-projekt och vill följa med, skapa ett med kommandot create-react-app.

npx create-react-app search-bar 

I den App.js fil, lägg till formulärelementet, inklusive inmatningstaggen:



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

Du bör använda useState Reagera krok och den på Ändra händelse för att styra ingången. Så, importera useState och ändra indata för att använda tillståndsvärdet:

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

Varje gång en användare skriver något i inmatningselementet, handtag Ändra uppdaterar staten.





Filtrera data vid ingångsändring

Sökfältet bör utlösa en sökning med hjälp av sökfrågan som användaren tillhandahåller. Det betyder att du bör filtrera data inuti handleChange-funktionen. Du bör också hålla reda på den filtrerade informationen i staten.

Ändra först tillståndet för att inkludera data:





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

Att bunta tillståndsvärdena så här, istället för att skapa ett för varje värde, minskar antalet renderingar, vilket förbättrar prestandan.

Datan du filtrerar kan vara vad som helst du vill göra en sökning på. Du kan till exempel skapa en lista med exempel på blogginlägg som det här:

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 också hämta data med hjälp av ett API från ett CDN eller en databas.

Ändra sedan handleChange()-funktionen för att filtrera data närhelst användaren skriver i inmatningen.

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 returnerar inläggen utan att söka igenom dem om frågan är tom. Om en användare har skrivit en fråga kontrollerar den om inläggets titel innehåller frågetexten. Genom att konvertera inläggets rubrik och frågan till gemener säkerställs att jämförelsen är skiftlägesokänslig.

När filtermetoden returnerar resultaten uppdaterar handleChange-funktionen statusen med frågetexten och filtrerad data.

Visar sökresultaten

Att visa sökresultaten innebär att loopa över listarrayen med hjälp av Karta metod och visa data för varje objekt.

hur man fixar hög cpu -användning windows 10
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>
)
}

Inuti ul-taggen kontrollerar komponenten om frågan är tom. Om det är det, visar den en tom sträng eftersom det betyder att användaren inte har sökt efter någonting. Om du vill söka igenom en lista med objekt som du redan visar, ta bort den här kryssrutan.

Om frågan inte är tom, itererar kartmetoden över sökresultaten och listar inläggets titlar.

Du kan också lägga till en bock som visar ett användbart meddelande om sökningen inte ger några resultat.

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

Att lägga till det här meddelandet förbättrar användarupplevelsen eftersom användaren inte lämnas att titta på ett tomt utrymme.

Hanterar mer än en gång sökparameter

Du kan använda React state och hooks, tillsammans med JavaScript-händelser, för att skapa ett anpassat sökelement som filtrerar en dataarray.

Filterfunktionen kontrollerar bara om frågan matchar en egenskap – titel – i objekten i arrayen. Du kan förbättra sökfunktionen genom att använda den logiska OR-operatorn för att matcha frågan med andra egenskaper i objektet.