Автозаполнение с нечетким поиском и Fuse.js

Узнайте, как создать список предложений при вводе имени браузера.

Посмотрите эту и многие другие статьи на lucaspaganini.com

Что мы будем строить

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

Что такое нечеткий (приблизительный) поиск

Что такое «нечеткий» поиск?

Нечеткий поиск ищет текст, который соответствует термину примерно, а не точно.

При точном поиске «приходи» никогда не будет соответствовать «Chrome», потому что в «Chrome» нет «прихода». Здесь нет места для интерпретаций, это либо правда, либо ложь. Это, конечно, не совсем по-человечески. Если мы что-то ищем, есть вероятность, что мы даже не знаем, как это правильно написать.

Нечеткий поиск намного более гибкий. Вместо истинности или ложности у нас есть степени истины. Нечеткий поиск покажет нам, насколько близки две строки. Существует множество различных алгоритмов нечеткого поиска.

Расстояние Хэмминга

В качестве учебного примера позвольте мне показать вам очень простой алгоритм нечеткого поиска, называемый расстоянием Хэмминга.

Для двух строк одинаковой длины расстояние Хэмминга между ними — это минимальное количество подстановок, необходимых для замены одной строки на другую. Например, расстояние Хэмминга между «Дэниел» и «Дениз» равно 3, потому что нам нужно изменить 3 буквы, чтобы они совпадали.

Daniel vs. Denise

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

Конечно, это было бы ужасно для пользователя, поскольку наш алгоритм работает только со строками одинаковой длины. Но это годный пример. Он использует расстояние Хэмминга, чтобы определить, насколько близко две строки.

Выбор алгоритма нечеткого поиска

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

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

Кроме того, выполнение поиска в бэкэнде дает вам гораздо больше возможностей. Двумя самыми популярными являются ElasticSearch и Algolia.

В этом посте мы будем иметь дело с небольшим набором данных, поэтому мы запустим наш поиск во внешнем интерфейсе.

Встроенное автозаполнение HTML с помощью `<datalist>`

Простой способ добавить автозаполнение к элементу ввода — использовать файл <datalist>. Это даже не требует никакого JavaScript, только HTML.

Алгоритм поиска довольно быстрый. Он использует точный поиск, удаляет пробелы и игнорирует чувствительность к регистру.

Но есть один нюанс… алгоритм поиска не настраивается. Как и стили списка. Так что это явно не сработает для реальных проектов, где у нас есть индивидуальный дизайн, которому нужно соответствовать. Вот почему мы собираемся создать собственный компонент вместо использования <datalist>.

Пользовательский нечеткий поиск с Fuse.js

Для нашего алгоритма нечеткого поиска я решил использовать Fuse.js. Он эффективен, хорошо документирован и активно поддерживается. Я делал все на чистом HTML, CSS и JavaScript. Я не хотел использовать фреймворк для этого примера, чтобы избежать ненужной сложности. Я оставляю ссылку на код в разделе ссылок. Вы увидите, что никакого процесса компиляции нет, я просто подаю файлы в папку public/.

Мои константы установлены в файле config.mjs.

Пользовательский раскрывающийся список объявлен в файле dropdown-element.mjs.

Наша функция нечеткого поиска с использованием Fuse.js определена в файле fuzzy-search.mjs.

И файл main.mjs связывает все: он прослушивает изменения в нашем вводе, запускает нечеткий поиск и отображает результаты.

Fuse.js предоставляет множество опций, и все они очень описательные. Обратите особое внимание на опцию threshold. Он определяет, насколько близко должны быть две строки, чтобы произошло совпадение. Установка его на 0 аналогична использованию точного поиска, а установка на 1 будет соответствовать чему угодно.

Я создал игровую площадку, чтобы вы могли лучше понять Fuse.js! Проверьте это:

Заключение

Как всегда, ссылки находятся в разделе ссылок. Поэкспериментируйте с кодовой базой и не стесняйтесь обращаться ко мне, если у вас есть какие-либо вопросы.

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

Хорошего дня, и увидимся в следующем.