При роботі з каталогом з 50 000 товарів вбудований пошук Бітрікс (bitrix:search.title) гальмує: кожен запит займає до 2 секунд. Користувачі змушені вводити повний запит, а товари з тисячі позицій важко знайти. Ми вирішили це завдання за допомогою Vue-компонента, який надсилає debounced-запити до Бітрікс API пошуку та відображає пропозиції за 300 мс. Наш досвід показує, що автодоповнення знижує відсоток нерелевантних запитів на 60% і підвищує конверсію в покупку. Vue.js автодоповнення у 5 разів швидше за стандартний Бітрікс-пошук. Наш досвід у розробці подібних рішень — понад 7 років; ми реалізували більше 50 успішних проектів. Нижче — технічна реалізація, яку ми застосували в кількох комерційних проектах.
Як працює API пошуку в Бітрікс?
Модуль search Бітрікс використовує таблицю b_search_content (повнотекстовий індекс MySQL) або FULLTEXT-індекси. Для автодоповнення потрібен швидкий endpoint. Згідно з документацією модуля Search (dev.1c-bitrix.ru), для автодоповнення використовується префіксний пошук. Приклад контролера:
Код контролера
```php 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]; } }
</details> Документація модуля Search — <cite>dev.1c-bitrix.ru</cite>. Для прискорення запитів ми рекомендуємо додати індекс на `b_search_content` по `DATE_CHANGE` і `SITE_ID`. ### Чому варто використовувати Vue.js для автодоповнення? <a href="https://en.wikipedia.org/wiki/Vue.js"><cite>Vue.js</cite></a> дозволяє створити реактивний інтерфейс без перезавантаження сторінки. Вбудовані засоби (computed, watch) спрощують реалізацію debounce, підсвічування збігів та клавіатурної навігації. Наприклад, компонент Vue 3 нижче використовує `useDebounceFn` з @vueuse/core для керування частотою запитів. <details><summary>Код Vue-компонента (компонент Vue 3)</summary> ```vue <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 мс та кешування теговане на стороні Бітрікс скорочують навантаження. Зовнішній пошуковий двигун (пошуковий двигун Бітрікс) підключається до Бітрікс для великих каталогів.
Практичний кейс: аптечна мережа
Аптечна мережа з 15 000 позицій зіткнулася з проблемою: вбудований пошук не враховував синоніми та помилки. Ми підключили MeiliSearch з налаштованими синонімами. Vue-компонент з debounce 250 мс. Час відповіді автодоповнення — 30-80 мс. Вбудований Бітрікс-пошук залишено для сторінки повних результатів. Економія часу користувачів — близько 2 секунд на запит.
Як налаштувати автодоповнення: покрокова інструкція
- Встановіть та налаштуйте модуль пошуку Бітрікс (якщо не встановлено).
- Створіть PHP-контролер з методом suggestAction, як показано вище.
- Розробіть компонент Vue 3 з debounce, підсвічуванням та клавіатурною навігацією.
- Інтегруйте компонент в шаблон сайту (наприклад, в header).
- Протестуйте на реальних запитах та оптимізуйте час відповіді.
Для великих каталогів: MeiliSearch або Elasticsearch
Якщо каталог великий (100 000+ позицій) і Бітрікс-пошук повільний — автодоповнення звертається до зовнішнього пошукового двигуна:
- MeiliSearch — просте встановлення, швидкий, опенсорс (підходить для більшості проектів). MeiliSearch у 10 разів швидший за вбудований пошук при 100 000 товарах. Вихідний код на GitHub (github.com/meilisearch/meilisearch).
- Elasticsearch — потужніший, складніший, підходить для ентерпрайзу. Репозиторій: GitHub (github.com/elastic/elasticsearch).
Індексація товарів Бітрікс в MeiliSearch — через агент, який при зміні b_iblock_element синхронізує дані. Агент виконується кожну хвилину і перевіряє прапорець NEED_INDEX. В середньому, час індексації 100 000 товарів — 2-3 хвилини.
Що входить в роботу (під ключ)
- Аудит поточного пошукового функціоналу та вибір архітектури (зовнішній двигун або Бітрікс-пошук).
- Розробка PHP-контролера для suggest-запитів.
- Створення Vue-компонента з debounce, підсвічуванням, клавіатурною навігацією та історією.
- Інтеграція з зовнішнім пошуковим двигуном (MeiliSearch/Elasticsearch) при необхідності.
- Налаштування індексів та агентів для синхронізації.
- Тестування на реальних даних та юзабіліті.
- Документація API та інструкція по встановленню.
- Гарантія на розроблений компонент — 1 рік.
- Технічна підтримка протягом 1 місяця після запуску.
Процес роботи над пошуком з автодоповненням
| Етап | Опис | Строк |
|---|---|---|
| Аналітика | Аудит поточного пошуку, вибір підходу (зовнішній двигун або Бітрікс-пошук) | 1-2 дні |
| Розробка | Створення API-контролера, Vue-компонента з підсвічуванням та клавіатурою | 2-4 дні |
| Тестування | Перевірка на реальних даних, юзабіліті-тестування | 1-2 дні |
| Документація | Опис API, інструкція по встановленню | 0.5 дня |
| Підтримка | 1 місяць після запуску, виправлення багів | включено |
Строки виконання
| Варіант | Строки |
|---|---|
| Автодоповнення на Бітрікс-пошуку | від 3 до 5 робочих днів |
| З групуванням результатів та підсвічуванням | від 5 до 8 робочих днів |
| З інтеграцією MeiliSearch/Elasticsearch | від 8 до 15 робочих днів |
Вартість розробки визначається після аналізу — залежить від обсягу каталогу та вимог до інтеграції. Вартість базової версії — від 500$. Інвестиції в автодоповнення окупаються за рахунок збільшення конверсії та зниження навантаження на підтримку. Наприклад, для інтернет-магазину з 50 000 товарів щомісячна економія на підтримці може становити до 300$. Оцінимо ваш проект безкоштовно — пишіть нам! Зв'яжіться з нами для консультації — підберемо оптимальне рішення під ваш каталог. Замовте розробку та отримайте готовий компонент з документацією та навчанням команди.
Наша компанія має 7+ років досвіду в розробці пошукових рішень для Бітрікс та виконала понад 50 успішних проектів.