Плагин умного поиска на сайте (only frontend)

от автора

Предыстория

Немного лирики.

Выбирал я как-то в одном интернет магазине одежду. Сам запрос в каталоге товаров приходилось “делить” на 2 части: что-то выбирать в фильтре, а что-то вписывать руками в поиск. И тут внезапно что-то щелкнуло в голове: а не проще ли все вводить руками, при этом чтобы фильтры выбирались сами из запроса? И чтобы при этом на бэк отправлять только набор фильтров, а не всю строку? Вроде бы вся информация на странице поиска для этого есть. Да и быстрее это, чем искать нужный фильтр и запоминать где он находится. Да и потом, дизайн сайта может измениться, фильтры могут переехать в другое место (запоминай заново, мелочь конечно, но все-таки), а строка поиска останется неизменной по функционалу.

Именно эти размышления подтолкнули меня на написание следующего плагина.

Итак, ближе к делу.

Установка

Плагин доступен в npm

npm i smart-search-site-engine

Также есть CDN

Пример использования

Более подробный пример есть на гите

import { S3e } from 'smart-search-site-engine'import type { S3eFilters, S3eThreshold } from 'smart-search-site-engine/dist/types';const filters: S3eFilters[] = [    {        name: "clothes",        options: [            {                value: "t-shirt",                descriptions: "футболка"            },            {                value: "pants",                descriptions: "штаны, брюки"            }        ]    },    {        name: "material",        options: [            {                value: "cotton",                descriptions: "хлопок, хлопковый"            },            {                value: "flax",                descriptions: ["лен", "льна", "льняной"]            }        ]    },    {        name: "details",        options: [            {                value: "short_sleeve",                descriptions: "короткий рукав",            },            {                value: "long_sleeve",                descriptions: "длинный рукав",            }        ]    }];const se = new S3e(filters);// В запросе намеренно допущены опечаткиse.find("купить хлопковую футблоку с короктим рукавом")/*[    {filter: 'material', value: 'cotton'},    {filter: 'clothes', value: 't-shirt'},    {filter: 'details', value: 'short_sleeve'}]*/

Послесловие

Короче, не умею я писать длинные красивые посты, просто хотелось поделиться своей наработкой. Буду рад обратной связи.

Всем хорошего лета!)

ссылка на оригинал статьи https://habr.com/ru/articles/1043418/