13,8 тыс подписчиков

Как добавить простую функцию поиска в приложение на React без сервера

5 марта 20215 мар 2021

5 мин

Функция поиска — одна из самых важных особенностей программного приложения. Поисковые сайты типа Google и DuckDuckGo помогают миллионам пользователей бороздить просторы Интернета и за считанные секунды находить то, что они ищут.

Оглавление

Что будем создавать
Создание компонента «Card»
Создание компонента «Search»

Источник: Nuances of Programming

Было бы неплохо включить функцию поиска в приложение на React. Но как быть, если не хочется настраивать отдельный сервер исключительно для работы с поиском. Есть ли способ добавить простой поиск в приложение на React?

Да, такой способ существует. Fuse.js — это мощная, легковесная поисковая библиотека, предназначенная для ведения поиска во внешней части приложения. Библиотека использует метод нечёткого поиска , который находит не только точные совпадения, но и строки, приблизительно соответствующие заданному шаблону.

Метод нечёткого поиска замечателен тем, что позволяет приложению возвращать близкие совпадения, даже если в шаблоне поиска допущена ошибка в написании слова или имеет место неправильный порядок слов в предложении.

Что будем создавать

Это руководство поможет вам создать с помощью Fuse.js простое приложение на React с собственной функцией поиска. Приложение будет предоставлять подборку книг для разработчиков программного обеспечения с возможностью применения фильтра функции поиска.

Вот как будет выглядеть итоговый результат:

Демоверсия проекта, а также его компоненты выложены на Bit.dev . Изучите её и установите эти компоненты в свой проект.

Демоверсия проекта и его компоненты выложены в разделе компонентов на сайте Bit

Первым делом необходимо выполнить начальную загрузку нового приложения на React с помощью Create React App :

npx create-react-app react-fusejs-example

Завершив загрузку, начнём прописывать данные книг в виде массива объектов. Эти данные будут передаваться в приложение и отображаться в виде списка карточек:

Создадим новый файл books.json и список книг. Данные будут иметь следующие свойства:

Строка title для названий книг.
Строка author для автора.
Строка image для атрибута src изображения книги.
url -адрес для ссылки на покупку или просмотр книги.

Вот файл на случай, если захотите его скопировать:

Теперь, когда есть данные о книгах, нужен компонент, который будет принимать эти данные и отображать их в виде простой карточки в приложении на React:

Создание компонента «Card»

У компонента Card будет четыре свойства для обработки передаваемых в него данных:

А вот и стилевое оформление компонента:

Можете просто загрузить компонент из этих коллекций на Bit :

npm install @bit /nsebhastian .react_fusejs .card

Затем просто импортируем компонент в файл App.js . Нужно лишь применить map() к массиву JSON в компоненте Card . Добавим <div> с именем класса Container , чтобы улучшить интерфейс:

Вот CSS для класса Container :

Список карточек завершён. Перейдём теперь к созданию компонента поиска Search .

Создание компонента «Search»

Компонент Search состоит всего лишь из одного текстового ввода с двумя свойствами:

placeholder для замещающего текста в поле ввода;
функция onChange , которая запускается, когда пользователь вводит что-то в поле ввода.

Напишем JSX-элемент для этого компонента:

Затем напишем для него CSS:

Воспользуемся этим компонентом, выложенным на Bit . Установим его с помощью NPM:

npm install @bit /nsebhastian .react_fusejs .search -bar

Затем импортируем компонент в файл App.js . Поместим компонент <SearchBar> и остальную часть кода в один элемент <div> :

Добавим единый CSS в App.css для выравнивания по центру элемента <h1> с классом Title :

.Title {
text-align : center;
}

Теперь все компоненты для этого демоприложения готовы. Остаётся только интегрировать Fuse.js в приложение на React.

Интеграция Fuse.js в приложение на React

Для начала интеграции Fuse.js в приложение на React нужно выполнить в проекте NPM-установку соответствующего пакета:

npm install fuse.js

Затем нужно импортировать библиотеку и создать новый экземпляр Fuse.js. Экземпляр принимает два задаваемых параметра:

data для выполнения поиска. Это может быть строковый или объектный массив.
Дополнительные опции для изменения поискового поведения.

Это означает, что в качестве первого аргумента нужно передать массив books . А второго — массив keys , содержащий title и author . Так функция поиска не будет искать строки image и url .

import Fuse from "fuse.js" ;

const fuse = new Fuse(books, {
keys : ["title" , "author" ],
});

Далее нужно вызвать функцию fuse.search() с любым поисковым шаблоном. Поиск вернёт список совпадений, и снова в виде массива:

const matches = fuse.search("Elon Musk" )

// возвращает [{ item: object }]

Подумаем теперь о поисковом поведении, подходящем для приложения. Этого должно быть достаточно:

когда пользователь вводит что-то в строку поиска, приложение выполняет поиск по массиву;
когда есть какое-то совпадение, приложение возвращает только те книги, которые соответствуют поисковому шаблону;
когда совпадений нет, приложение возвращает пустой экран;
когда пользователь очищает строку поиска, приложение показывает все данные без применения фильтра.

Для достижения такого поведения нужно поместить массив books в состояние React:

const [data, setData] = useState(books);

Когда пользователь вводит что-то в строку поиска, должна запускаться функция, которая выполнит поиск. Назовём эту функцию searchData и передадим в неё входное значение:

<SearchBar placeholder ="Search" onChange ={(e) => searchData(e.target.value)}
/>

Пора создать функцию. Первым делом проверим поисковый шаблон, переданный в функцию. Если он пуст, поместим состояние обратно в массив books и завершим выполнение функции с помощью оператора return :

const searchData = (pattern ) => {
if (!pattern) {
setData(books);
return ;
}

Затем выполним поиск по заданному шаблону:

const fuse = new Fuse(data, {
keys : ["title" , "author" ],
});

const result = fuse.search(pattern);

Создадим новый массив matches для хранения любого совпадения, возвращаемого функцией Fuse. Если результат пустой, данные устанавливаются в виде пустого массива:

Если result непустой, вызываем функцию forEach для итеративного обхода по result и добавляем каждый элемент в массив. Затем обновим состояние с помощью массива matches :

И вот приложение готово. Если вы пропустили какой-то этап, сравните свой код с демоверсией .

Теперь вы можете найти книгу в своём списке любимых книг. Красота!

Заключение

Каким бы ни было ваше приложение, важно помочь его пользователям найти то, что они ищут. Fuse.js — это простая в использовании поисковая библиотека, не требующая никакой настройки бэкенда, а её метод нечёткого поиска использует функцию поиска с защитой от ошибок.

Спасибо за внимание!