Como filtrar resultados de pesquisa enquanto digita com React

Como filtrar resultados de pesquisa enquanto digita com React

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 seus visitantes estão procurando.





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



MAKEUSEO VÍDEO DO DIA

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





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

Que tipo de flor é esta 
npx create-react-app search-bar

No App.js arquivo, adicione o elemento de formulário, incluindo a tag de entrada:



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

Você deve usar o useState Gancho de reação e a em mudança evento para controlar a entrada. Então, importe useState e modifique a entrada para usar o valor de 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> 
    ) 
  }

Toda vez que um usuário digita algo dentro do elemento input, manipularAlterar atualiza o estado.



Filtrando os dados na alteração 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 assim, 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 sobre a qual você deseja realizar uma pesquisa. Por exemplo, você pode criar uma lista de postagens de blog de exemplo como esta:

como ver quem te bloqueou no facebook 
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 de um 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 em minúsculas garante que a comparação não diferencia maiúsculas de minúsculas.

Depois que o método de filtro 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 fazer um loop sobre a matriz de lista usando o mapa e exibindo os dados para cada item.

encontre meu iphone nenhuma localização encontrada 
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, ele exibe uma string vazia porque significa que o usuário não pesquisou nada. Se você deseja pesquisar em uma lista de itens que já está exibindo, remova essa verificaçã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 verificação 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 o usuário não fica olhando para um espaço em branco.

Manipulando mais de uma vez o parâmetro de pesquisa

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

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