Предыстория

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

Выбирал я как-то в одном интернет магазине одежду. Сам запрос в каталоге товаров приходилось “делить” на 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'}
]
*/

Послесловие

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

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

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