Краткое резюме
При реализации клиентского поиска обычно используется метод сравнения строк, например indexOf , contains и т. д. Эти методы хороши, но в реальном мире люди могут искать контент с неправильным написанием, неправильным порядком предложений и т. д. Нечеткий поиск позволит нам решить эти проблемы.
Нечеткий поиск
Нечеткий поиск или Приблизительное сопоставление строк – это метод сопоставления строк, который обеспечивает приблизительное, а не точное соответствие строки.
Хорошо, давайте создадим приложение.
Мы собираемся создать простую страницу с текстом и окном поиска.
Полный исходный код можно найти по адресу https://github.com/NaveenDA/fuzzy-search-react.
Обычный поиск
Как правило, мы используем метод сравнения строк, например indexOf, contains и т. д. Это будет работать нормально, но не даст результатов при поиске слова с орфографическими ошибками.
В этом случае мы ищем как name, так и tags с преобразованием их в нижний регистр, поэтому это поможет сделать поиск нечувствительным к регистру.
Здесь я попытался найти react и rect, но он показывает только результат для react , потому что метод сравнения строк работает таким образом, чтобы сделать наш поиск нечетким, нам нужен алгоритм сравнения строк.
Существует множество алгоритмов, чтобы сделать это максимально возможным, даже вам не нужно изучать ни один из них, чтобы использовать его.
Для создания поисковой системы как нечеткой поисковой системы мы будем использовать Fuse.js.
Fuse.js — это мощная и легкая библиотека нечеткого поиска, не имеющая зависимостей.
Интеграция fuse.js с поиском
Удивительно, но если сделать очень маленький, наш поиск станет нечетким.
const fuse = new Fuse(data, {
keys: ["name", "tags"]
});
const result = fuse.search(query);
Объект результата содержит отфильтрованные результаты, даже fuse.js сортирует результат за нас.
Наш окончательный результат
Пожалуйста, попробуйте эту демоверсию https://dq9ou.csb.app/
внешняя ссылка
- Репозиторий Github — https://github.com/NaveenDA/fuzzy-search-react/
- CodeSandbox — https://dq9ou.csb.app/
- Fuse.js — https://fusejs.io/
Спасибо, что дочитали до конца :)
P.S. 👋 Привет, я Навин Д.А.! Если вам это понравилось, рассмотрите возможность подписаться на меня в Твиттере и поделиться историей со своими друзьями-разработчиками 🐋😀
