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.
Crear la barra de búsqueda
La búsqueda tomará la entrada de un usuario y activará la función de filtrado. Puede 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.
npx crear-reaccionar-aplicación buscar-bar
En el Aplicación.js archivo, agregue el elemento de formulario, incluida la etiqueta de entrada:
exportarpor defectofunciónaplicación() {
devolver (
<división>
<forma>
<tipo de entrada ="buscar"/>
</form>
</div>
)
}
Deberías usar el useStateGancho de reacción y el onChange evento para controlar la entrada. Entonces, importe useState y modifique la entrada para usar el valor del estado:
importar { estado de uso } de "Reaccionar"
exportarpor defectofunciónaplicación() {
const [consulta, establecerconsulta] = useState('')
constante manejarCambio = (e) => {
establecer consulta(mi.objetivo.valor)
}
devolver (
<división>
<forma>
<tipo de entrada ="buscar" value={consulta} 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:
constante [estado, establecer estado] = usar estado ({
consulta: '',
lista: []
})
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:
constante publicaciones = [
{
URL: '',
etiquetas: ['reaccionar', 'Blog'],
título: 'Cómo crear una reacción buscar bar',
},
{
URL:'',
etiquetas: ['nodo','expresar'],
título: 'Cómo simular datos api en Node',
},
// mas datos aqui
]
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.
constante manejarCambio = (e) => {
constante resultados = publicaciones.filtro (publicación => {
if (e.objetivo.valor "") devolver publicaciones
devolvercorreo.título.toLowerCase().incluye(mi.objetivo.valor.toLowerCase())
})
establecerestado({
consulta: mi.objetivo.valor,
lista: resultados
})
}
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.
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.
exportarpor defectofunciónaplicación() {
// estado y función handleChange()
devolver (
<división>
<forma>
<input onChange={handleChange} value={state.query} type="buscar"/>
</form>
<ul>
{(estado.consulta ''? "": estado.lista.mapa (publicación => {
devolver <li key={publicación.título}>{título de la entrada}</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.
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>
{(estado.consulta ''? "Ninguna publicación coincide con la consulta": !estado.lista.longitud? "Su consulta no arrojó ningún resultado": estado.lista.mapa (publicación => {
devolver <li key={publicación.título}>{título de la entrada}</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.