Автор оригинала: FreeCodeCamp Community Member.
Поиск – это мощный способ помочь людям посещать ваш сайт найти контент, который наиболее важен для них. Но часто это действительно сложно выяснить правила и логику, чтобы сделать это. В этой статье мы посмотрим, как мы можем использовать Fuse.js, чтобы добавить поиск в наши приложения.
- Что такое fuse.js?
- Почему важно поиск?
- Что мы собираемся построить?
- Шаг 0: Загрузка нашего приложения
- Шаг 1: Установка FUSE.js
- Шаг 2: Создание нового экземпляра поиска предохранителей
- Шаг 3: Настройка динамического поиска на основе пользовательского ввода
Что такое fuse.js?
Fuse.js Является ли библиотека JavaScript, которая обеспечивает нечеткие возможности поиска для приложений и веб-сайтов. Это приятно и просто в использовании из коробки, но также включает в себя параметры конфигурации, которые позволяют вам настроить и создавать мощные решения.
Почему важно поиск?
Если вы создаете контент или пытаетесь продать продукт с вашим веб-сайтом, важно помочь своим посетителям на самом деле найти то, что они ищет.
Если вы создаете веб-сайт электронной коммерции, вы хотите, чтобы кто-то мог легко найти свои виниловые фигуры Bender, а не для того, чтобы выкопать весь каталог.
Что мы собираемся построить?
Мы собираемся начать с базового примера приложения React React. Он собирается включить некоторую информацию о характере в качестве структурированных данных для одного из моих любимых показывает Futurama, которые просто выброшены в список HTML.
С помощью этого списка мы собираемся использовать Fuse.js, чтобы предоставить возможности поиска на стороне клиента, что позволяет нам продемонстрировать поиск персонажа, который мы ищем их именем и другие детали.
Шаг 0: Загрузка нашего приложения
Начать работу, нам нужно понадобиться контент для работы. Я начал создавать список персонажей из Futurama в качестве структурированных данных JSON, которые я помещаю в список со свежим приложением Create React.
Вы также заметите, что уже добавил вход для нашего поиска. Это еще не функционально, но мы будем использовать это, чтобы начать.
Если вы хотите начать на том же месте, я создал филиал с моим демонстрацией демонстрации, что вы можете локально клонировать, чтобы пройти через проект со мной!
git clone --single-branch --branch start git@github.com:colbyfayock/my-futurama-characters.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 (предохранитель) и увидеть наш Предохранитель Класс Мы будем использовать для создания наших возможностей поиска.
И с этим мы готовы начать!
Следовать вместе с фиксацией
Шаг 2: Создание нового экземпляра поиска предохранителей
Чтобы использовать FUSE.js, мы захочем сначала создать новый экземпляр этого.
В верхней части вашего компонента добавьте:
const fuse = new Fuse(characters, {
keys: [
'name',
'company',
'species'
]
});
С этим делает:
- Создает новый экземпляр предохранителя
- Проходит в нашем
персонажиМассив объектов - Указывает 3 ключей в наших данных, которые мы хотим искать
Далее, чтобы выполнить поиск, мы можем добавить:
const results = fuse.search('bender');
И если мы консолью выйти результаты, мы видим:
Вы заметите, что у нас есть больше результатов, чем нашего друга Бендера, хотя. Fuse.js предоставляет «нечеткий поиск», означающий, что он пытается помочь вам в том случае, если вы не уверены, что вы ищете или если вы ошиблись, что ваш запрос.
Чтобы получить представление о том, как это работает, давайте добавим включить Возможность нашего поиска:
const fuse = new Fuse(characters, {
keys: [
'name',
'company',
'species'
],
includeScore: true
});
Теперь мы можем увидеть Оценка атрибут в наших результатах объект.
Вы заметите, что наш первый результат имеет действительно низкий балл. С Fuse.js более низкая оценка означает, что он ближе к точным совпадению.
Оценка 0 указывает на идеальное совпадение, а счет 1 указывает на полное несоответствие.
Это говорит, что невероятно вероятно, что первый результат – то, что мы ищем, но не уверены в других.
Так что с нашими результатами мы хотим на самом деле подключить это к нашему интерфейсу. Если вы заметили, что наш вывод массива отличается от того, что мы отображаем для HTML-списка, поэтому давайте создадим новую переменную, которую мы можем изменить его на:
const results = fuse.search('bender');
const characterResults = results.map(character => character.item);
Что это делает, – это создание нового массива, используя карта Метод, который будет включать только Предмет свойство от каждого объекта массива.
Тогда, если мы заменим наше персонажи Карта внутри нашего списка с HARTARYRESULS.MAP :
-
{characterResults.map(character => {
const { name, company, species, thumb } = character;
Теперь мы можем видеть, что наша страница показывает только результаты для «Bender»!
Следуйте вместе с Commit!
Шаг 3: Настройка динамического поиска на основе пользовательского ввода
Теперь, когда у нас есть трудный поиск, мы хотим, чтобы кто-то действительно сможет использовать ввод поиска для поиска!
Чтобы добиться этого, мы собираемся использовать Уместите крючок и слушать изменения в вход Поле, который будет динамически создать поиск наших данных.
Во-первых, импортировать Уместите Крюк от реакции:
import React, { useState } from 'react';
Далее давайте будем использовать этот крюк для создания состояния экземпляра:
const [query, updateQuery] = useState('');
Здесь мы создаем новое состояние Запрос что мы можем обновить с UpdateQuary Это по умолчанию для пустой строки ( '' ).
С этим давайте скажем наш поиск ввод, чтобы использовать это Запрос значение, как это значение:
На данный момент ничего не должно быть другим, так как мы используем пустой запрос.
Теперь давайте добавим обработчик событий на наш вход, который мы можем использовать для обновления нашего состояния:
И мы захочем создать эту функцию, чтобы мы могли использовать его:
function onSearch({ currentTarget }) {
updateQuery(currentTarget.value);
}
Это обновит наше Запрос со значением ввода в любое время это меняется.
Теперь, когда наше Запрос У нас будет то, что мы хотим искать, мы можем обновить наш экземпляр поиска:
const results = fuse.search(query);
И теперь, если вы перезагрузите страницу, это пусто! ?
Это потому, что по умолчанию предохранитель видит наш пустой запрос и ничего не совпадает с ним. Если мы сейчас найдем что-то вроде суспельзы Мы видим наш поиск динамически обновления с результатами!
Если мы хотели исправить это, хотя, чтобы все наши результаты показывали, когда нет запроса, мы можем сделать это с Если Заявление или в моем примере, тройном, который покажет все персонажи, если нет запроса:
const characterResults = query ? results.map(character => character.item) : characters;
И с этим у нас есть наш базовый поиск!
Следуйте вместе с Commit!
Что я могу сделать дальше?
Настройка поиска
Fuse.js поставляется с большим количеством параметров, которые вы можете использовать, чтобы настроить свой поиск, однако вы хотите. Хотите только показать уверенные результаты? Используйте порог вариант! Хотите чувствительные к регистру? Используйте бессмысленно вариант!
https://fusejs.io/api/options.html
Установка запроса по умолчанию с параметрами URL
Иногда вы хотите, чтобы кто-то сможет связать с определенным набором результатов. Для этого мы могли бы быть в состоянии добавить новый параметр URL, как ? q = bender Отказ
Чтобы сделать эту работу, вы можете захватить этот параметр URL с помощью JavaScript и использовать это значение для установки нашего Запрос государственный.
Присоединиться к разговору!
Вы когда-нибудь хотели добавить нечеткий, динамический поиск вашего @reactjs приложение, но не знали, как? ? Это руководство проводит вас через то, как использовать FUSE.js, чтобы добавить мощный поиск на стороне клиента в ваше приложение ⚛️ ⚛️ Проверьте это!? https://t.co/emlvxaocat.