Разработка поиска с автодополнением на Vue.js для 1С-Битрикс

Разработка поиска с автодополнением на Vue.js для 1С-Битрикс

Встроенный поиск Битрикс (bitrix:search.title) не поддерживает автодополнение из коробки. Есть сторонние решения для полнотекстового поиска (Sphinx, Elasticsearch), но для большинства интернет-магазинов задача решается Vue-компонентом с debounced-запросами к Битрикс API поиска.

API поиска в Битрикс

Модуль search Битрикс использует таблицу b_search_content (полнотекстовый индекс MySQL) или FULLTEXT-индексы. Для автодополнения нужен быстрый endpoint:

class SearchController extends \Bitrix\Main\Engine\Controller
{
    public function suggestAction(string $query, int $limit = 8): array
    {
        if (mb_strlen($query) < 2) return ['items' => []];

        // Поиск через CSearch::Search или прямой запрос к b_search_content
        $results = \CSearch::Search([
            'QUERY'    => $query . '*', // Префиксный поиск
            'SITE_ID'  => SITE_ID,
            'MODULE'   => 'iblock',
            'PARAM2'   => $iblockId,
        ]);

        $items = [];
        while ($item = $results->Fetch()) {
            $items[] = [
                'title' => $item['TITLE'],
                'url'   => $item['URL'],
                'image' => $item['PARAM1'], // Если настроено
            ];
            if (count($items) >= $limit) break;
        }
        return ['items' => $items];
    }
}

Компонент SearchAutocomplete

<script setup>
import { ref, watch } from 'vue';
import { useDebounceFn } from '@vueuse/core';

const query = ref('');
const suggestions = ref([]);
const isOpen = ref(false);

const fetchSuggestions = useDebounceFn(async (q) => {
    if (q.length < 2) { suggestions.value = []; return; }
    const { data } = await api.get('/search/suggest', { params: { query: q } });
    suggestions.value = data.items;
    isOpen.value = data.items.length > 0;
}, 300);

watch(query, fetchSuggestions);
</script>

UX-детали, которые важны

Клавиатурная навигация — стрелки вверх/вниз по списку, Enter для перехода, Escape для закрытия. Реализуется через keydown-обработчики и activeIndex ref.

Подсветка совпадений — в названиях товаров выделяем часть, совпадающую с запросом:

function highlight(text, query) {
    const regex = new RegExp(`(${escapeRegex(query)})`, 'gi');
    return text.replace(regex, '<mark>$1</mark>');
}

Группировка результатов — показываем отдельно: товары, категории, статьи блога. Три параллельных запроса или один endpoint, возвращающий сгруппированный JSON.

История поиска — последние 5 запросов из localStorage. Показываем при фокусе на пустом поле.

Интеграция с Elasticsearch / MeiliSearch

Если каталог большой (100 000+ позиций) и Битрикс-поиск медленный — автодополнение обращается к внешнему поисковому движку:

• MeiliSearch — простая установка, быстрый, опенсорс
• Elasticsearch — мощнее, сложнее, подходит для энтерпрайза

Индексация товаров Битрикс в MeiliSearch — через агент, который при изменении b_iblock_element синхронизирует данные.

Случай из практики

Аптечная сеть: поиск по МНН, торговым названиям и производителям — 15 000 позиций. Битрикс-поиск давал нерелевантные результаты (не учитывал синонимы и опечатки). Решение: MeiliSearch с настроенными синонимами (например, «аспирин» → «ацетилсалициловая кислота»), Vue-компонент с debounce 250 мс. Время ответа автодополнения — 30–80 мс. Встроенный Битрикс-поиск оставлен для страницы полных результатов.

Сроки выполнения