Cómo filtrar los resultados de búsqueda mientras se escribe con React

Cómo filtrar los resultados de búsqueda mientras se escribe con React

Las barras de búsqueda son una excelente manera de ayudar a los usuarios a encontrar lo que necesitan en su sitio web. También son buenos para el análisis si realiza un seguimiento de lo que buscan sus visitantes.





Puede usar React para crear una barra de búsqueda que filtre y muestre datos a medida que el usuario escribe. Con los ganchos de React y los métodos de matriz de filtro y mapa de JavaScript, el resultado final es un cuadro de búsqueda funcional y con capacidad de respuesta.





MAKEUSEOF VÍDEO DEL DÍA

La búsqueda tomará la entrada de un usuario y activará la función de filtrado. Puedes use una biblioteca como Formik para crear formularios en React , pero también puedes crear una barra de búsqueda desde cero.





Si no tiene un proyecto de React y desea continuar, cree uno usando el comando create-react-app.

el controlador ps4 no se conecta a ps4
npx create-react-app search-bar 

En el Aplicación.js archivo, agregue el elemento de formulario, incluida la etiqueta de entrada:



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

Deberías usar el useState Gancho de reacción y el onChange evento para controlar la entrada. Entonces, importe useState y modifique la entrada para usar el valor del 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 un usuario escribe algo dentro del elemento de entrada, manejarCambiar actualiza el estado.





Filtrar los datos en el cambio de entrada

La barra de búsqueda debe activar una búsqueda utilizando la consulta que proporciona el usuario. Esto significa que debe filtrar los datos dentro de la función handleChange. También debe realizar un seguimiento de los datos filtrados en el estado.

Primero, modifique el estado para incluir los datos:





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

Al agrupar los valores de estado de esta manera, en lugar de crear uno para cada valor, se reduce la cantidad de renderizaciones y se mejora el rendimiento.

Los datos que filtre pueden ser cualquier cosa sobre la que desee realizar una búsqueda. Por ejemplo, puede crear una lista de publicaciones de blog de muestra 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
]

Tú también puedes obtener los datos usando una API desde un CDN o una base de datos.

A continuación, modifique la función handleChange() para filtrar los datos siempre que el usuario escriba dentro de la 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
})
}

La función devuelve las publicaciones sin buscarlas si la consulta está vacía. Si un usuario ha escrito una consulta, verifica si el título de la publicación incluye el texto de la consulta. Convertir el título de la publicación y la consulta a minúsculas garantiza que la comparación no distinga entre mayúsculas y minúsculas.

cómo transferir fotos de iphone a mac

Una vez que el método de filtro devuelve los resultados, la función handleChange actualiza el estado con el texto de la consulta y los datos filtrados.

Visualización de los resultados de la búsqueda

Mostrar los resultados de la búsqueda implica recorrer la matriz de la lista usando el mapa método y mostrando los datos de cada elemento.

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 de la etiqueta ul, el componente verifica si la consulta está vacía. Si es así, muestra una cadena vacía porque significa que el usuario no ha buscado nada. Si desea buscar en una lista de elementos que ya está mostrando, elimine esta marca.

que paso con el proyecto lugar tranquilo

Si la consulta no está vacía, el método del mapa itera sobre los resultados de la búsqueda y enumera los títulos de las publicaciones.

También puede agregar una marca que muestre un mensaje útil si la búsqueda no arroja 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>

Agregar este mensaje mejora la experiencia del usuario porque el usuario no se queda mirando un espacio en blanco.

Manejo de más de una vez el parámetro de búsqueda

Puede usar el estado de React y los ganchos, junto con los eventos de JavaScript, para crear un elemento de búsqueda personalizado que filtre una matriz de datos.

La función de filtro solo verifica si la consulta coincide con una propiedad (título) en los objetos dentro de la matriz. Puede mejorar la función de búsqueda utilizando el operador lógico OR para hacer coincidir la consulta con otras propiedades del objeto.