Розробка пошуку з автодоповненням на 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 мс. Вбудований Бітрікс-пошук залишено для сторінки повних результатів.

Терміни виконання