Com filtrar els resultats de la cerca mentre escriviu amb React

Com filtrar els resultats de la cerca mentre escriviu amb React

Les barres de cerca són una bona manera d'ajudar els usuaris a trobar el que necessiten al vostre lloc web. També són bons per a l'anàlisi si feu un seguiment del que cerquen els vostres visitants.





Podeu utilitzar React per crear una barra de cerca que filtri i mostri dades a mesura que l'usuari escrigui. Amb els ganxos React i els mètodes de mapa i matriu de filtres de JavaScript, el resultat final és un quadre de cerca funcional i sensible.



MAKEUSEO VÍDEO DEL DIA

La cerca rebrà l'entrada d'un usuari i activarà la funció de filtratge. Tu pots utilitzeu una biblioteca com Formik per crear formularis a React , però també podeu crear una barra de cerca des de zero.





es pot piratejar el meu telèfon mitjançant bluetooth

Si no teniu cap projecte React i voleu seguir-lo, creeu-ne un mitjançant l'ordre create-react-app.

npx create-react-app search-bar

En el App.js fitxer, afegiu l'element del formulari, inclosa l'etiqueta d'entrada:



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

Hauríeu d'utilitzar el useState Ganxo de reacció i la onChange esdeveniment per controlar l'entrada. Per tant, importeu useState i modifiqueu l'entrada per utilitzar el valor de l'estat:

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

Cada vegada que un usuari escriu alguna cosa dins de l'element d'entrada, handleChange actualitza l'estat.



Filtrat de les dades al canvi d'entrada

La barra de cerca hauria de desencadenar una cerca mitjançant la consulta que l'usuari proporciona. Això vol dir que hauríeu de filtrar les dades dins de la funció handleChange. També hauríeu de fer un seguiment de les dades filtrades a l'estat.

Primer, modifiqueu l'estat per incloure les dades:



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

Agrupar els valors d'estat com aquest, en lloc de crear-ne un per a cada valor, redueix el nombre de representacions i millora el rendiment.

Les dades que filtreu poden ser qualsevol cosa en què vulgueu fer una cerca. Per exemple, podeu crear una llista de publicacions de bloc de mostra com aquesta:

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 
  ]

Tu pots també obtenir les dades mitjançant una API des d'una CDN o una base de dades.

A continuació, modifiqueu la funció handleChange() per filtrar les dades sempre que l'usuari escrigui dins de l'entrada.

com eliminar un Windows 10 del grup de casa 
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 
    }) 
}

La funció retorna les publicacions sense cercar-hi si la consulta està buida. Si un usuari ha escrit una consulta, comprova si el títol de la publicació inclou el text de la consulta. Convertir el títol de la publicació i la consulta a minúscules garanteix que la comparació no distingeix entre majúscules i minúscules.

Un cop el mètode de filtre retorna els resultats, la funció handleChange actualitza l'estat amb el text de la consulta i les dades filtrades.

Visualització dels resultats de la cerca

La visualització dels resultats de la cerca implica fer un bucle per la matriu de la llista mitjançant el mapa mètode i mostrant les dades de cada element.

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

Dins de l'etiqueta ul, el component comprova si la consulta està buida. Si és així, mostra una cadena buida perquè vol dir que l'usuari no ha cercat res. Si voleu cercar a través d'una llista d'elements que ja esteu mostrant, elimineu aquesta selecció.

Si la consulta no està buida, el mètode del mapa itera els resultats de la cerca i enumera els títols de les publicacions.

També podeu afegir un xec que mostri un missatge útil si la cerca no retorna cap 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>

Afegir aquest missatge millora l'experiència de l'usuari perquè l'usuari no es queda mirant un espai en blanc.

Gestió de paràmetres de cerca més d'una vegada

Podeu utilitzar l'estat de React i els ganxos, juntament amb els esdeveniments de JavaScript, per crear un element de cerca personalitzat que filtra una matriu de dades.

La funció de filtre només comprova si la consulta coincideix amb una propietat (títol) dels objectes dins de la matriu. Podeu millorar la funcionalitat de cerca utilitzant l'operador OR lògic per fer coincidir la consulta amb altres propietats de l'objecte.