Ako filtrovať výsledky vyhľadávania pri písaní pomocou React

Vyhľadávacie panely sú skvelým spôsobom, ako pomôcť používateľom nájsť na vašom webe to, čo potrebujú. Sú tiež dobré na analýzu, ak sledujete, čo vaši návštevníci hľadajú.

React môžete použiť na vytvorenie vyhľadávacieho panela, ktorý filtruje a zobrazuje údaje podľa toho, ako používateľ píše. Vďaka hákom React a metódam mapy JavaScript a poľa filtrov je konečným výsledkom responzívne funkčné vyhľadávacie pole.

---

---

VYUŽITIE VIDEA DŇA

Vytvorenie vyhľadávacieho panela

Vyhľadávanie prevezme vstup od používateľa a spustí funkciu filtrovania. Môžeš použite knižnicu ako Formik na vytváranie formulárov v Reacte , ale môžete tiež vytvoriť panel vyhľadávania úplne od začiatku.

Ak nemáte projekt React a chcete ho nasledovať, vytvorte si ho pomocou príkazu create-react-app.

npx create-react-app search-bar 

V App.js súbor, pridajte prvok formulára vrátane vstupnej značky:

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

Mali by ste použiť useState Reagovať hák a pri zmene udalosť na ovládanie vstupu. Takže importujte useState a upravte vstup tak, aby používal hodnotu stavu:

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

Zakaždým, keď používateľ zadá niečo do vstupného prvku, rukoväťZmeniť aktualizuje stav.

---

---

Filtrovanie údajov o zmene vstupu

Vyhľadávací panel by mal spustiť vyhľadávanie pomocou dopytu, ktorý zadá používateľ. To znamená, že by ste mali filtrovať údaje vo funkcii handleChange. Mali by ste tiež sledovať filtrované údaje v stave.

Najprv upravte stav tak, aby zahŕňal údaje:

---

---

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

Spájanie hodnôt stavu, ako je toto, namiesto vytvárania jednej pre každú hodnotu, znižuje počet vykreslení a zlepšuje výkon.

Údaje, ktoré filtrujete, môžu byť čokoľvek, na čom chcete vykonať vyhľadávanie. Môžete si napríklad vytvoriť zoznam vzorových blogových príspevkov, ako je tento:

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 
  ] 

Môžete tiež získať údaje pomocou rozhrania API z CDN alebo databázy.

Ďalej upravte funkciu handleChange() na filtrovanie údajov vždy, keď používateľ napíše do vstupu.

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

Ak je dopyt prázdny, funkcia vráti príspevky bez toho, aby ich prehľadávala. Ak používateľ zadal dopyt, skontroluje, či názov príspevku obsahuje text dopytu. Konverzia názvu príspevku a dopytu na malé písmená zaisťuje, že porovnanie nerozlišuje veľké a malé písmená.

Keď metóda filtra vráti výsledky, funkcia handleChange aktualizuje stav textom dotazu a filtrovanými údajmi.

Zobrazenie výsledkov vyhľadávania

Zobrazenie výsledkov vyhľadávania zahŕňa cyklické prechádzanie cez pole zoznamu pomocou mapa a zobrazenie údajov pre každú položku.

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

Vo vnútri značky ul komponent kontroluje, či je dopyt prázdny. Ak áno, zobrazí sa prázdny reťazec, pretože to znamená, že používateľ nič nehľadal. Ak chcete prehľadávať zoznam položiek, ktoré už zobrazujete, zrušte začiarknutie.

Ak dopyt nie je prázdny, metóda mapy iteruje výsledky vyhľadávania a uvádza názvy príspevkov.

spustite Mac OS v systéme Windows 10

Môžete tiež pridať zaškrtnutie, ktoré zobrazí užitočnú správu, ak vyhľadávanie nevráti žiadne výsledky.

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

Pridanie tejto správy zlepšuje používateľskú skúsenosť, pretože používateľ nezostane pri pohľade na prázdne miesto.

Spracovanie viac ako raz vyhľadávacieho parametra

Stav React a háčiky spolu s udalosťami JavaScript môžete použiť na vytvorenie vlastného vyhľadávacieho prvku, ktorý filtruje pole údajov.

Funkcia filtrovania skontroluje iba to, či sa dotaz zhoduje s jednou vlastnosťou – názvom – v objektoch v poli. Funkciu vyhľadávania môžete zlepšiť použitím logického operátora OR na priradenie dotazu k iným vlastnostiam v objekte.