La búsqueda es una forma eficaz de ayudar a las personas que visitan su sitio a encontrar el contenido que más les importa. Pero a menudo es realmente difícil descubrir las reglas y la lógica para que eso suceda. En este artículo, veremos cómo podemos usar fuse.js para agregar búsquedas a nuestras aplicaciones.
- ¿Qué es fuse.js?
- ¿Por qué es importante la búsqueda?
- ¿Qué vamos a construir?
- Paso 0: Bootstrapping de nuestra aplicación
- Paso 1: Instalar Fuse.js
- Paso 2: Crear una nueva instancia de búsqueda de Fuse
- Paso 3: configurar la búsqueda dinámica basada en la entrada del usuario
¿Qué es fuse.js?
Fuse.js es una biblioteca de JavaScript que proporciona capacidades de búsqueda aproximada para aplicaciones y sitios web. Es agradable y fácil de usar, pero también incluye opciones de configuración que le permiten modificar y crear soluciones poderosas.
¿Por qué es importante la búsqueda?
Ya sea que sea un creador de contenido o esté tratando de vender un producto con su sitio web, es importante ayudar a sus visitantes a encontrar realmente lo que buscan.
Si está creando un sitio web de comercio electrónico, desea que alguien pueda encontrar fácilmente sus figuras de vinilo Bender en lugar de tener que buscar primero en todo el catálogo.
¿Qué vamos a construir?
Comenzaremos con un ejemplo básico de Create React App. Va a incluir información de personajes como datos estructurados para uno de mis programas favoritos, Futurama, que simplemente se descarga en una lista HTML.
Con esa lista, usaremos fuse.js para proporcionar capacidades de búsqueda del lado del cliente, lo que nos permitirá demostrar la búsqueda del personaje que estamos buscando por su nombre y otros detalles.
Paso 0: Bootstrapping de nuestra aplicación
Para empezar, necesitaremos contenido con el que trabajar. Comencé construyendo una lista de personajes de Futurama como datos json estructurados que puse en una lista con una nueva aplicación Create React.
También notará que ya agregué una entrada para nuestra búsqueda. Todavía no es funcional, pero lo usaremos para comenzar.
Si desea comenzar en el mismo lugar, ¡creé una rama con mi repositorio de demostración que puede clonar localmente para recorrer el proyecto conmigo!
git clone --single-branch --branch start [email protected]:colbyfayock/my-futurama-characters.git Rama de Git "inicio"
O siga con el compromiso.
Paso 1: Instalar Fuse.js
Lo primero que queremos hacer es agregar Fuse.js a nuestra aplicación. En su proyecto, ejecute:
yarn add fuse.js # or npm install --save fuse.js Esto guardará la dependencia de nuestro proyecto para que podamos usarlo en nuestro proyecto.
A continuación, queremos importar la dependencia a nuestra aplicación para que podamos comenzar a compilar con ella. En la parte superior de su archivo, en nuestro caso, src/App.jssi me está siguiendo en un nuevo proyecto Create React App, agregue:
import Fuse from 'fuse.js'; Si desea probar que está funcionando, puede console.log(Fuse)ver nuestra Fuseclase que usaremos para crear nuestras capacidades de búsqueda.
Y con eso, ¡estamos listos para comenzar!
Siga junto con el compromiso
Paso 2: Crear una nueva instancia de búsqueda de Fuse
Para usar Fuse.js, primero queremos crear una nueva instancia de él.
En la parte superior de su componente, agregue:
const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ] }); Con esto hace:
- Crea una nueva instancia de Fuse
- Pasa en nuestra
charactersvariedad de objetos - Especifica las 3 claves de nuestros datos en las que queremos buscar
A continuación, para realizar la búsqueda, podemos agregar:
const results = fuse.search('bender'); Y si desconectamos la consola de los resultados, podemos ver:
Sin embargo, notarás que tenemos más resultados que nuestro amigo Bender. Fuse.js proporciona una "búsqueda difusa", lo que significa que intenta ayudarlo en caso de que no esté seguro de lo que está buscando o si está escribiendo mal su consulta.
Para tener una idea de cómo funciona esto, agreguemos la includeScoreopción a nuestra búsqueda:
const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ], includeScore: true }); Ahora podemos ver el scoreatributo en nuestro objeto de resultados.
Notarás que nuestro primer resultado tiene una puntuación muy baja. Con fuse.js, una puntuación más baja significa que está más cerca de una coincidencia exacta.
Una puntuación de 0 indica una coincidencia perfecta, mientras que una puntuación de 1 indica una falta de coincidencia completa.
Dice que es increíblemente probable que el primer resultado sea el que estamos buscando, pero no confía en los demás.
Entonces, con nuestros resultados, queremos conectar eso a nuestra interfaz de usuario. Si nota que la salida de nuestra matriz es diferente de lo que estamos mapeando para la lista HTML, creemos una nueva variable a la que podamos cambiarla:
const results = fuse.search('bender'); const characterResults = results.map(character => character.item); Lo que está haciendo es crear una nueva matriz utilizando el método de mapa que solo incluirá la itempropiedad de cada objeto de matriz.
Entonces, si reemplazamos nuestro charactersmapa dentro de nuestra lista con characterResults.map:
{characterResults.map(character => { const { name, company, species, thumb } = character; ¡Ahora podemos ver que nuestra página solo muestra los resultados de "bender"!
¡Sigue el compromiso!
Paso 3: configurar la búsqueda dinámica basada en la entrada del usuario
Ahora que tenemos una búsqueda codificada en funcionamiento, ¡queremos que alguien realmente pueda usar la entrada de búsqueda para buscar!
Para lograr esto, usaremos el useStategancho y escucharemos los cambios en el inputcampo, lo que creará dinámicamente una búsqueda de nuestros datos.
Primero, importe el useStategancho de React:
import React, { useState } from 'react'; A continuación, usemos ese gancho para crear una instancia de estado:
const [query, updateQuery] = useState(''); Aquí, estamos creando un nuevo estado queryque podemos actualizar con updateQueryel valor predeterminado de una cadena vacía ( '').
Con eso, digamos a nuestra entrada de búsqueda que use ese queryvalor como su valor:
En este punto, nada debería ser diferente, ya que estamos usando una consulta en blanco.
Ahora agreguemos un controlador de eventos a nuestra entrada que podemos usar para actualizar nuestro estado:
Y queremos crear esa función para poder usarla:
function onSearch({ currentTarget }) { updateQuery(currentTarget.value); } Esto actualizará nuestro querycon el valor de la entrada cada vez que cambie.
Ahora que query tendremos lo que queremos buscar, podemos actualizar nuestra instancia de búsqueda:
const results = fuse.search(query); Y ahora, si vuelve a cargar la página, ¡está en blanco! ?
Eso es porque, de forma predeterminada, Fuse ve nuestra consulta vacía y no la coincide con nada. Si ahora buscamos algo como slurms, ¡podemos ver que nuestra búsqueda se actualiza dinámicamente con resultados!
Sin embargo, si quisiéramos arreglar esto para que todos nuestros resultados se muestren cuando no hay una consulta, podemos hacerlo con una ifdeclaración o en mi ejemplo, un ternario, que mostrará todos los caracteres si no hay una consulta:
const characterResults = query ? results.map(character => character.item) : characters; ¡Y con eso, tenemos nuestra búsqueda básica!
¡Sigue el compromiso!
¿Qué puedo hacer a continuación?
Afinando su búsqueda
Fuse.js viene con muchas opciones que puede usar para ajustar su búsqueda a su gusto. ¿Quiere mostrar solo resultados confiables? ¡Usa la thresholdopción! ¿Quieres consultas sensibles a mayúsculas y minúsculas? ¡Usa la isCaseSensitiveopción!
//fusejs.io/api/options.html
Configuración de la consulta predeterminada con parámetros de URL
A veces desea que alguien pueda vincular a un conjunto particular de resultados. Para hacer esto, es posible que deseemos poder agregar un nuevo parámetro de URL como ?q=bender.
Para que esto funcione, puede tomar ese parámetro de URL con javascript y usar ese valor para establecer nuestro queryestado.
¡Unirse a la conversación!
¿Alguna vez quiso agregar una búsqueda dinámica y difusa a su aplicación @reactjs pero no sabía cómo? ?
Esta guía le explica cómo usar Fuse.js para agregar una potente búsqueda del lado del cliente a su aplicación React ⚛️
¡Compruébalo !? // t.co/EMlvXaOCat
- Colby Fayock (@colbyfayock) 26 de mayo de 2020
- ? Sigueme en Twitter
- ? ️ Suscríbete a mi Youtube
- ✉️ Suscríbete a mi boletín