Jak filtrovat výsledky vyhledávání při psaní pomocí React

Vyhledávací lišty jsou skvělým způsobem, jak uživatelům pomoci najít na vašem webu to, co potřebují. Jsou také dobré pro analýzu, pokud sledujete, co vaši návštěvníci hledají.

React můžete použít k vytvoření vyhledávacího panelu, který filtruje a zobrazuje data podle toho, jak uživatel píše. Díky háčkům React a metodám map JavaScript a pole filtrů je konečným výsledkem responzivní a funkční vyhledávací pole.

Vytvoření vyhledávací lišty

Vyhledávání převezme vstup od uživatele a spustí funkci filtrování. Můžeš k vytváření formulářů v Reactu použijte knihovnu, jako je Formik, ale můžete také vytvořit vyhledávací panel úplně od začátku.

Pokud nemáte projekt React a chcete ho sledovat, vytvořte si ho pomocí příkazu create-react-app.

npx vytvořit-react-app Vyhledávání-bar

V App.js soubor, přidejte prvek formuláře včetně vstupní značky:

vývoznívýchozífunkceAplikace() {
vrátit se (
<div>
<formulář>
<typ vstupu ="Vyhledávání"/>
</form>
</div>
 )
}

Měli byste použít useStateReagovat háček a při změně událost pro ovládání vstupu. Takže importujte useState a upravte vstup tak, aby používal hodnotu stavu:

import { useState } z "Reagovat"
vývoznívýchozífunkceAplikace() {
 const [dotaz, setquery] = useState('')
konst handleChange = (e) => {
setquery(E.cílová.hodnota)
 }
vrátit se (
<div>
<formulář>
<typ vstupu ="Vyhledávání" value={query} onChange={handleChange}/>
</form>
</div>
 )
 }

Pokaždé, když uživatel zadá něco do vstupního prvku, rukojeťZměnit aktualizuje stav.

Filtrování dat při změně vstupu

Panel vyhledávání by měl spustit vyhledávání pomocí dotazu, který uživatel zadá. To znamená, že byste měli filtrovat data uvnitř funkce handleChange. Měli byste také sledovat filtrovaná data ve stavu.

Nejprve upravte stav tak, aby zahrnoval data:

konst [stav, setstate] = useState({
 dotaz: '',
seznam: []
})

Sdružování hodnot stavu, jako je toto, namísto vytváření jedné pro každou hodnotu, snižuje počet vykreslení a zlepšuje výkon.

Data, která filtrujete, může být cokoliv, na čem chcete provádět vyhledávání. Můžete například vytvořit seznam ukázkových blogových příspěvků, jako je tento:

konst příspěvky = [
 { 
 url: '',
 štítky: ['reagovat', 'blog'],
 název: 'Jak na to vytvořit reakce Vyhledávání bar',
 },
 {
 url:'',
 štítky: ['uzel','vyjádřit'],
 titul: 'Jak zesměšňovat data API v Node',
 },
// více údajů zde
 ]

Můžete také načíst data pomocí API z CDN nebo databáze.

Dále upravte funkci handleChange() tak, aby filtrovala data, kdykoli uživatel napíše do vstupu.

konst handleChange = (e) => {
konst výsledky = posts.filter (post => {
 if (e.cílová.hodnota "") vrátit příspěvky
vrátit sepošta.titul.toLowerCase().zahrnuje(E.cílová.hodnota.toLowerCase())
 })
 setstate({
dotaz: E.cílová.hodnota,
seznam: Výsledek
 })
}

Pokud je dotaz prázdný, funkce vrátí příspěvky, aniž by je prohledávala. Pokud uživatel zadal dotaz, zkontroluje, zda název příspěvku obsahuje text dotazu. Převedení názvu příspěvku a dotazu na malá písmena zajistí, že se při porovnání nerozlišuje malá a velká písmena.

Jakmile metoda filtru vrátí výsledky, funkce handleChange aktualizuje stav textem dotazu a filtrovanými daty.

Zobrazení výsledků hledání

Zobrazení výsledků hledání zahrnuje opakování pole seznamu pomocí mapa a zobrazení dat pro každou položku.

vývoznívýchozífunkceAplikace() {
// stav a funkce handleChange().
vrátit se (
<div>
<formulář>
<input onChange={handleChange} value={state.query} type="Vyhledávání"/>
</form>
<ul>
 {(state.query ''? "": state.list.map (příspěvek => {
 vrátit se <li key={post.title}>{post.title}</li>
 }))}
</ul>
</div>
 )
}

Uvnitř tagu ul komponenta kontroluje, zda je dotaz prázdný. Pokud ano, zobrazí se prázdný řetězec, protože to znamená, že uživatel nic nehledal. Pokud chcete prohledávat seznam položek, které již zobrazujete, zrušte toto zaškrtnutí.

Pokud dotaz není prázdný, metoda map iteruje výsledky vyhledávání a uvádí názvy příspěvků.

Můžete také přidat zaškrtnutí, které zobrazí užitečnou zprávu, pokud hledání nevrátí žádné výsledky.

<ul>
 {(state.query ''? "Dotazu neodpovídají žádné příspěvky": !state.list.length? "Váš dotaz nevrátil žádné výsledky": state.list.map (příspěvek => {
 vrátit se <li key={post.title}>{post.title}</li>
 }))}
</ul>

Přidání této zprávy zlepšuje uživatelský dojem, protože uživatel nezůstane při pohledu na prázdné místo.

Zpracování více než jednou vyhledávacího parametru

Stav React a háčky můžete použít spolu s událostmi JavaScriptu k vytvoření vlastního vyhledávacího prvku, který filtruje pole dat.

Funkce filtru pouze zkontroluje, zda dotaz odpovídá jedné vlastnosti – názvu – v objektech uvnitř pole. Funkci vyhledávání můžete vylepšit použitím logického operátoru OR k přiřazení dotazu k jiným vlastnostem v objektu.