Hakutulosten suodattaminen kirjoittaessasi Reactilla

Hakupalkit ovat loistava tapa auttaa käyttäjiä löytämään tarvitsemansa verkkosivustoltasi. Ne ovat myös hyviä analytiikkaan, jos pidät kirjaa siitä, mitä vierailijasi etsivät.

Reactin avulla voit rakentaa hakupalkin, joka suodattaa ja näyttää tietoja käyttäjän kirjoittaessa. React-koukkujen ja JavaScript-kartta- ja suodatintaulukkomenetelmien ansiosta lopputuloksena on responsiivinen, toimiva hakukenttä.

PÄIVÄN VIDEON TEKEMINEN

Hakupalkin luominen

Haku ottaa syötteen käyttäjältä ja käynnistää suodatustoiminnon. Sinä pystyt käytä Formikin kaltaista kirjastoa lomakkeiden luomiseen Reactissa , mutta voit myös luoda hakupalkin tyhjästä.

Jos sinulla ei ole React-projektia ja haluat seurata sitä, luo sellainen komennolla create-react-app.

npx create-react-app search-bar

Vuonna App.js tiedosto, lisää lomakeelementti, mukaan lukien syöttötagi:

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

Sinun tulisi käyttää useState Reaktiokoukku ja onChange tapahtuma ohjaamaan tuloa. Joten tuo useState ja muokkaa syötettä käyttämään tila-arvoa:

puhelimeni ei käynnisty

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

Aina kun käyttäjä kirjoittaa jotain syöttöelementin sisään, kahvaVaihda päivittää tilaa.

Tietojen suodattaminen syötteen muutoksen yhteydessä

Hakupalkin pitäisi käynnistää haku käyttämällä käyttäjän antamaa kyselyä. Tämä tarkoittaa, että sinun tulee suodattaa tiedot handleChange-funktion sisällä. Sinun tulee myös seurata tilassa olevia suodatettuja tietoja.

Muokkaa ensin tilaa niin, että se sisältää tiedot:

Voinko palauttaa pelejä Steamissä?

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

Tila-arvojen niputtaminen tällä tavalla sen sijaan, että luotaisiin yksi jokaiselle arvolle, vähentää renderöintien määrää ja parantaa suorituskykyä.

Suodattamasi tiedot voivat olla mitä tahansa, jolle haluat tehdä haun. Voit esimerkiksi luoda luettelon esimerkkiblogiviesteistä, kuten tämä:

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 
  ]

Voit myös noutaa tiedot API:n avulla CDN:stä tai tietokannasta.

Muokkaa seuraavaksi handleChange()-funktiota suodattamaan tiedot aina, kun käyttäjä kirjoittaa syötteeseen.

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

Funktio palauttaa viestit etsimättä niitä, jos kysely on tyhjä. Jos käyttäjä on kirjoittanut kyselyn, se tarkistaa, sisältääkö viestin otsikko kyselyn tekstiä. Viestin otsikon ja kyselyn muuntaminen pieniksi kirjaimiksi varmistaa, että vertailussa kirjainkoolla ei ole merkitystä.

Kun suodatusmenetelmä palauttaa tulokset, handleChange-funktio päivittää tilan kyselytekstillä ja suodatetuilla tiedoilla.

Hakutulosten näyttäminen

Hakutulosten näyttämiseen liittyy silmukoita luettelotaulukon yli käyttämällä kartta menetelmä ja kunkin kohteen tietojen näyttäminen.

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

ul-tunnisteen sisällä komponentti tarkistaa, onko kysely tyhjä. Jos on, se näyttää tyhjän merkkijonon, koska se tarkoittaa, että käyttäjä ei ole etsinyt mitään. Jos haluat etsiä jo näytettävien kohteiden luettelosta, poista tämä valintamerkki.

Jos kysely ei ole tyhjä, karttamenetelmä toistuu hakutuloksissa ja luettelee viestien otsikot.

Windows 10: n virtuaalimuistin suositeltu koko

Voit myös lisätä valintamerkin, joka näyttää hyödyllisen viestin, jos haku ei tuota tuloksia.

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

Tämän viestin lisääminen parantaa käyttökokemusta, koska käyttäjä ei jää katsomaan tyhjää kohtaa.

Useamman kuin kerran hakuparametrin käsittely

Voit käyttää React-tilaa ja koukkuja yhdessä JavaScript-tapahtumien kanssa luodaksesi mukautetun hakuelementin, joka suodattaa tietojoukon.

Suodatintoiminto tarkistaa vain, vastaako kysely yhtä ominaisuutta – otsikkoa – taulukon sisällä olevissa objekteissa. Voit parantaa hakutoimintoa käyttämällä loogista OR-operaattoria kohdistaaksesi kyselyn muihin objektin ominaisuuksiin.