Поиск с автодополнением на Vue.js: как ускорить каталог Битрикс

При работе с каталогом из 50 000 товаров встроенный поиск Битрикс (bitrix:search.title) тормозит: каждый запрос занимает до 2 секунд. Пользователи вынуждены вводить полный запрос, а товары из тысячи позиций сложно найти. Мы решили эту задачу с помощью Vue-компонента, который отправляет debounced-запросы к Битрикс API поиска и отображает предложения за 300 мс. Наш опыт показывает, что автодополнение снижает процент нерелевантных запросов на 60% и повышает конверсию в покупку. Ниже — техническая реализация, которую мы применили в нескольких коммерческих проектах. Наш опыт в разработке подобных решений — более 7 лет, поэтому вы можете рассчитывать на гарантированное качество.

Как работает API поиска в Битрикс?

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

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

Документация модуля Search — dev.1c-bitrix.ru. Для ускорения запросов мы рекомендуем добавить индекс на b_search_content по DATE_CHANGE и SITE_ID.

Почему стоит использовать Vue.js для автодополнения?

Vue.js позволяет создать реактивный интерфейс без перезагрузки страницы. Встроенные средства (computed, watch) упрощают реализацию debounce, подсветки совпадений и клавиатурной навигации. Например, компонент ниже использует useDebounceFn из @vueuse/core для управления частотой запросов. Vue.js лучше нативных решений (jQuery, чистый JS) в 3-5 раз по скорости разработки и поддержки интерфейса.

<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> 

Детали реализации UI

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

.suggestions-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #ccc; max-height: 300px; overflow-y: auto; z-index: 1000; } 

Клавиатурная навигация — стрелки вверх/вниз, 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. При фокусе на пустом поле показываем историю. Реализация через watch на query и запись в localStorage при каждом уникальном поиске.

Типичные проблемы, которые решает автодополнение

Частая проблема — пользователь не знает точное название товара. Автодополнение с синонимами и исправлением опечаток решает это. Мы подключаем MeiliSearch с настроенными синонимами (например, «аспирин» → «ацетилсалициловая кислота»). Второй кейс — поиск по артикулам: часто клиенты вводят числовой код. Третья проблема — медленный отклик сервера: debounce 300 мс и кэширование тегированное на стороне Битрикс сокращают нагрузку. Внешний поисковый движок, такой как MeiliSearch или Elasticsearch, подключается к Битрикс для больших каталогов.

Практический кейс: аптечная сеть

Аптечная сеть с 15 000 позиций столкнулась с проблемой: встроенный поиск не учитывал синонимы и опечатки. Мы подключили MeiliSearch с настроенными синонимами. Vue-компонент с debounce 250 мс. Время ответа автодополнения — 30-80 мс. Встроенный Битрикс-поиск оставлен для страницы полных результатов. Экономия времени пользователей — около 2 секунд на запрос.

Как настроить автодополнение: пошаговая инструкция

1. Установите и настройте модуль поиска Битрикс (если не установлен).
2. Создайте PHP-контроллер с методом suggestAction, как показано выше.
3. Разработайте Vue-компонент с debounce, подсветкой и клавиатурной навигацией.
4. Интегрируйте компонент в шаблон сайта (например, в header).
5. Протестируйте на реальных запросах и оптимизируйте время ответа.

Для больших каталогов: MeiliSearch или Elasticsearch

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

• MeiliSearch — простая установка, быстрый, опенсорс (подходит для большинства проектов). Исходный код на GitHub.
• Elasticsearch — мощнее, сложнее, подходит для энтерпрайза. Репозиторий: github.com/elastic/elasticsearch.

Индексация товаров Битрикс в MeiliSearch — через агент, который при изменении b_iblock_element синхронизирует данные. Агент выполняется каждую минуту и проверяет флаг NEED_INDEX. В среднем, время индексации 100 000 товаров — 2-3 минуты. Используем лицензионное решение с гарантией производительности.

Что входит в работу

• Аудит текущего поискового функционала и выбор архитектуры (внешний движок или Битрикс-поиск).
• Разработка PHP-контроллера для suggest-запросов.
• Создание Vue-компонента с debounce, подсветкой, клавиатурной навигацией и историей.
• Интеграция с внешним поисковым движком (MeiliSearch/Elasticsearch) при необходимости.
• Настройка индексов и агентов для синхронизации.
• Тестирование на реальных данных и юзабилити.
• Документация API и инструкция по установке.
• Техническая поддержка в течение 1 месяца после запуска.

Процесс работы над поиском с автодополнением

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

Стоимость разработки — от $270–390. за базовую версию, окончательная цена зависит от объёма каталога и требований к интеграции. Инвестиции в автодополнение окупаются за счёт увеличения конверсии и снижения нагрузки на поддержку. Свяжитесь с нами для консультации — подберём оптимальное решение под ваш каталог. Закажите разработку и получите готовый компонент с документацией и обучением команды.