Как да добавите търсене към React App с Fuse.js

Търсенето е мощен начин да помогне на хората, които посещават вашия сайт, да намерят най-важното за тях съдържание. Но често е наистина предизвикателно да се измислят правилата и логиката, за да се случи това. В тази статия ще видим как можем да използваме fuse.js, за да добавим търсене към нашите приложения.

  • Какво е fuse.js?
  • Защо търсенето е важно?
  • Какво ще строим?
  • Стъпка 0: Стартирайте нашето приложение
  • Стъпка 1: Инсталиране на Fuse.js
  • Стъпка 2: Създаване на нов екземпляр за търсене на Fuse
  • Стъпка 3: Настройване на динамично търсене въз основа на въведеното от потребителя

Какво е fuse.js?

Fuse.js е JavaScript библиотека, която предоставя размити възможности за търсене на приложения и уебсайтове. Това е приятно и лесно за използване от кутията, но също така включва опции за конфигуриране, които ви позволяват да ощипвате и да създавате мощни решения.

Защо търсенето е важно?

Независимо дали сте създател на съдържание или се опитвате да продадете продукт с вашия уебсайт, важно е да помогнете на посетителите си в действителност да намерят това, което търсят.

Ако изграждате уебсайт за електронна търговия, искате някой да може лесно да намери вашите фигури от винил на Bender, вместо да се налага първо да разрови целия каталог.

Какво ще строим?

Ще започнем с основен пример за създаване на приложение React. Ще включва някаква информация за символи като структурирани данни за едно от любимите ми предавания Futurama, което просто е изхвърлено в HTML списък.

С този списък ще използваме fuse.js, за да предоставим възможности за търсене от страна на клиента, което ни позволява да демонстрираме търсенето на героя, който търсим, по неговото име и други подробности.

Стъпка 0: Стартирайте нашето приложение

За да започнем, ще ни трябва съдържание, с което да работим. Започнах с изграждането на списък с символи от Futurama като структурирани json данни, които поставих в списък със ново приложение React Create.

Също така ще забележите, че вече съм добавил вход за нашето търсене. Все още не е функционален, но ще го използваме, за да започнем.

Ако искате да започнете на същото място, аз създадох клон с моята демонстрация на репо, който можете да клонирате локално, за да преминете през проекта с мен!

git clone --single-branch --branch start [email protected]:colbyfayock/my-futurama-characters.git 

Git клон "старт"

Или следвайте заедно с ангажимента.

Стъпка 1: Инсталиране на Fuse.js

Първото нещо, което ще искаме да направим, е да добавим Fuse.js към нашето приложение. Във вашия проект изпълнете:

yarn add fuse.js # or npm install --save fuse.js 

Това ще спести зависимостта от нашия проект, за да можем да го използваме в нашия проект.

След това ще искаме да импортираме зависимостта в нашето приложение, за да можем да започнем да изграждаме с него. В нашия случай, в нашия случай, src/App.jsако следвате заедно с мен в нов проект Create React App, добавете:

import Fuse from 'fuse.js'; 

Ако искате да тествате дали работи, можете да console.log(Fuse)видите нашия Fuseклас, който ще използваме, за да създадем нашите възможности за търсене.

И с това сме готови да започнем!

Следвайте заедно с фиксирането

Стъпка 2: Създаване на нов екземпляр за търсене на Fuse

За да използваме Fuse.js, първо ще искаме да създадем нов екземпляр от него.

В горната част на вашия компонент добавете:

const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ] }); 

С това прави:

  • Създава нов екземпляр на Fuse
  • Преминава в нашия charactersмасив от обекти
  • Посочва 3-те ключа в нашите данни, в които искаме да търсим

След това, за да извършим търсенето, можем да добавим:

const results = fuse.search('bender'); 

И ако изведем резултатите от конзолата, можем да видим:

Ще забележите, че имаме повече резултати от нашия приятел Бендер. Fuse.js предоставя „размито търсене“, което означава, че се опитва да ви помогне, в случай че не сте сигурни какво търсите или ако сте написали грешно вашата заявка.

За да добиете представа как работи това, нека добавим includeScoreопцията към нашето търсене:

const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ], includeScore: true }); 

Сега можем да видим scoreатрибута в нашия обект с резултати.

Ще забележите, че първият ни резултат има наистина нисък резултат. С fuse.js по-ниският резултат означава, че е по-близо до точното съвпадение.

Резултат 0 показва перфектно съвпадение, докато резултат 1 показва пълно несъответствие.

Казва се, че е невероятно първият резултат да е това, което търсим, но не е уверен в останалите.

Така че с нашите резултати искаме всъщност да свържем това с нашия потребителски интерфейс. Ако забележите, че изходът ни за масив е различен от това, което ние картографираме за HTML списъка, така че нека създадем нова променлива, която можем да я променим на:

const results = fuse.search('bender'); const characterResults = results.map(character => character.item); 

Това, което прави, е създаването на нов масив с помощта на метода map, който ще включва само itemсвойството от всеки обект на масив.

Тогава, ако заменим нашата charactersкарта в нашия списък с characterResults.map:

    {characterResults.map(character => { const { name, company, species, thumb } = character;

Вече можем да видим, че нашата страница показва само резултатите за "bender"!

Следвайте заедно с ангажимента!

Стъпка 3: Настройване на динамично търсене въз основа на въведеното от потребителя

Сега, когато работим с кодирано търсене, искаме някой наистина да може да използва входа за търсене за търсене!

За да постигнем това, ще използваме useStateкуката и ще слушаме промени в inputполето, което динамично ще създаде търсене на нашите данни.

Първо, импортирайте useStateкуката от React:

import React, { useState } from 'react'; 

След това нека използваме тази кука за създаване на държавен екземпляр:

const [query, updateQuery] = useState(''); 

Тук създаваме ново състояние на queryтова, което можем да актуализираме по updateQueryподразбиране до празен низ ( '').

С това, нека кажем на нашия вход за търсене да използва тази queryстойност, тъй като тя е стойност:

На този етап нищо не трябва да е различно, тъй като използваме празна заявка.

Сега нека добавим манипулатор на събития към нашия вход, който можем да използваме, за да актуализираме състоянието си:

И ние ще искаме да създадем тази функция, за да можем да я използваме:

function onSearch({ currentTarget }) { updateQuery(currentTarget.value); } 

Това ще актуализира нашата queryстойност на входа всеки път, когато се промени.

Сега, когато нашите query  ще имат това, което искаме да търсим, можем да актуализираме нашия екземпляр за търсене:

const results = fuse.search(query); 

И сега, ако презаредите страницата, тя е празна! ?

Това е така, защото по подразбиране Fuse вижда празната ни заявка и не я съпоставя с нищо. Ако сега търсим нещо подобно slurms, можем да видим търсенето ни динамично да се актуализира с резултати!

Ако обаче искахме да поправим това, така че всичките ни резултати да се показват, когато няма заявка, можем да го направим с ifизявление или в моя пример, тройка, която ще покаже всички символи, ако няма заявка:

const characterResults = query ? results.map(character => character.item) : characters; 

И с това, ние имаме нашето основно търсене!

Следвайте заедно с ангажимента!

Какво мога да направя след това?

Настройка на търсенето

Fuse.js се предлага с много опции, които можете да използвате, за да настроите търсенето си, както искате. Искате ли да показвате само уверени резултати? Използвайте thresholdопцията! Искате ли чувствителни към регистъра заявки? Използвайте isCaseSensitiveопцията!

//fusejs.io/api/options.html

Задаване на заявка по подразбиране с параметри на URL

Понякога искате някой да може да се свърже с определен набор от резултати. За да направите това, може да искаме да можем да добавим нов параметър на URL като ?q=bender.

За да направите това, можете да вземете този параметър на URL с javascript и да използвате тази стойност, за да зададете нашето queryсъстояние.

Присъединете се към разговора!

Някога искали ли сте да добавите размито, динамично търсене към вашето приложение @reactjs, но не знаете как? ?

Това ръководство ще ви преведе как да използвате Fuse.js, за да добавите мощно търсене от страна на клиента към вашето приложение React ⚛️

Проверете!? // t.co/EMlvXaOCat

- Колби Файок (@colbyfayock) 26 май 2020 г.

Последвайте ме за още Javascript, UX и други интересни неща!

  • ? Последвай ме в Туйтър
  • ? ️ Абонирайте се за моя Youtube
  • Регистрирайте се за моя бюлетин