Pesquisa de site

Como filtrar os resultados da pesquisa ao digitar com React


Uma barra de pesquisa responsiva pode tornar seu site ou aplicativo muito mais agradável de usar. Também é um ótimo projeto para aprender como o React gerencia o estado.

As barras de pesquisa são uma ótima maneira de ajudar os usuários a encontrar o que precisam em seu site. Eles também são bons para análises se você acompanhar o que os visitantes estão procurando.

Você pode usar o React para construir uma barra de pesquisa que filtre e exiba dados conforme o usuário digita. Com os ganchos React e os métodos JavaScript map e filter array, o resultado final é uma caixa de pesquisa funcional e responsiva.

Criando a barra de pesquisa

A pesquisa receberá informações de um usuário e acionará a função de filtragem. Você pode usar uma biblioteca como Formik para criar formulários no React, mas também pode criar uma barra de pesquisa do zero.

Se você não tem um projeto React e deseja acompanhar, crie um usando o comando create-react-app.

npx create-react-app search-bar

No arquivo App.js, adicione o elemento form, incluindo a tag input:

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

Você deve usar o gancho React useState e o evento onChange para controlar a entrada. Portanto, importe useState e modifique a entrada para usar o valor do estado:

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 vez que um usuário digita algo dentro do elemento input, handleChange atualiza o estado.

Filtrando os dados na mudança de entrada

A barra de pesquisa deve acionar uma pesquisa usando a consulta fornecida pelo usuário. Isso significa que você deve filtrar os dados dentro da função handleChange. Você também deve acompanhar os dados filtrados no estado.

Primeiro, modifique o estado para incluir os dados:

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

Agrupar os valores de estado dessa forma, em vez de criar um para cada valor, reduz o número de renderizações, melhorando o desempenho.

Os dados que você filtra podem ser qualquer coisa que você queira realizar uma pesquisa. Por exemplo, você pode criar uma lista de exemplos de postagens de blog como esta:

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
  ]

Você também pode buscar os dados usando uma API de um CDN ou banco de dados.

Em seguida, modifique a função handleChange() para filtrar os dados sempre que o usuário digitar dentro da entrada.

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

A função retorna as postagens sem pesquisá-las se a consulta estiver vazia. Se um usuário digitou uma consulta, ele verifica se o título da postagem inclui o texto da consulta. Converter o título da postagem e a consulta para letras minúsculas garante que a comparação não faça distinção entre maiúsculas e minúsculas.

Depois que o método filter retorna os resultados, a função handleChange atualiza o estado com o texto da consulta e os dados filtrados.

Exibindo os resultados da pesquisa

A exibição dos resultados da pesquisa envolve percorrer a matriz da lista usando o método mapa e exibir os dados de cada item.

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

Dentro da tag ul, o componente verifica se a consulta está vazia. Se for, exibe uma string vazia porque significa que o usuário não pesquisou nada. Se você quiser pesquisar em uma lista de itens que já está exibindo, desmarque esta opção.

Se a consulta não estiver vazia, o método map itera sobre os resultados da pesquisa e lista os títulos das postagens.

Você também pode adicionar uma marca que exibe uma mensagem útil se a pesquisa não retornar resultados.

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

Adicionar esta mensagem melhora a experiência do usuário porque ele não fica olhando para um espaço em branco.

Tratamento de parâmetro de pesquisa mais de uma vez

Você pode usar o estado React e ganchos, juntamente com eventos JavaScript, para criar um elemento de pesquisa personalizado que filtre uma matriz de dados.

A função de filtro verifica apenas se a consulta corresponde a uma propriedade – título – nos objetos dentro do array. Você pode melhorar a funcionalidade de pesquisa usando o operador lógico OR para corresponder a consulta a outras propriedades no objeto.

Artigos relacionados: