Як додати пошук до програми React за допомогою Fuse.js

Пошук - це потужний спосіб допомогти людям, які відвідують ваш сайт, знайти найважливіший для них вміст. Але часто дуже складно з’ясувати правила та логіку, щоб це здійснити. У цій статті ми побачимо, як ми можемо використовувати fuse.js для додавання пошуку до наших додатків.

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

Що таке fuse.js?

Fuse.js - це бібліотека JavaScript, яка надає можливості нечіткого пошуку програм та веб-сайтів. Це приємно і легко використовувати з коробки, але також включає параметри конфігурації, які дозволяють налаштувати та створювати потужні рішення.

Чому пошук важливий?

Незалежно від того, чи створюєте ви вміст, чи намагаєтесь продати товар на своєму веб-сайті, важливо допомогти відвідувачам насправді знайти те, що вони шукають.

Якщо ви створюєте веб-сайт електронної комерції, ви хочете, щоб хтось міг легко знаходити ваші вінілові фігурки Bender, а не спочатку перебирати весь каталог.

Що ми будемо будувати?

Ми почнемо з базового прикладу Create React App. Він буде включати деяку інформацію про персонаж як структуровані дані для одного з моїх улюблених шоу Futurama, який просто викидається в список HTML.

За допомогою цього списку ми будемо використовувати fuse.js для надання можливостей пошуку на стороні клієнта, що дозволить нам продемонструвати пошук шуканого персонажа за їх іменем та іншими деталями.

Крок 0: Завантажте наш додаток

Для початку нам знадобиться вміст для роботи. Я розпочав зі створення списку символів з Futurama як структурованих даних JSON, які додав до списку зі свіжим додатком Create React.

Ви також помітите, що я вже додав дані для нашого пошуку. Це ще не функціонально, але ми використаємо це для початку.

Якщо ви хочете розпочати з того самого місця, я створив з моїм демонстраційним репо гілку, яку ви можете клонувати локально, щоб пройти зі мною за проектом!

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 та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку