Developing a search engine with autocomplete in Vue.js for 1C-Bitrix

Search with Autocomplete Development in Vue.js for 1C-Bitrix

The built-in Bitrix search (bitrix:search.title) does not support autocomplete out of the box. There are third-party full-text search solutions (Sphinx, Elasticsearch), but for most online stores the task is solved with a Vue component using debounced requests to the Bitrix search API.

Bitrix Search API

The Bitrix search module uses the b_search_content table (MySQL full-text index) or FULLTEXT indexes. A fast endpoint is needed for autocomplete:

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

        // Search via CSearch::Search or direct query to b_search_content
        $results = \CSearch::Search([
            'QUERY'    => $query . '*', // Prefix search
            'SITE_ID'  => SITE_ID,
            'MODULE'   => 'iblock',
            'PARAM2'   => $iblockId,
        ]);

        $items = [];
        while ($item = $results->Fetch()) {
            $items[] = [
                'title' => $item['TITLE'],
                'url'   => $item['URL'],
                'image' => $item['PARAM1'], // If configured
            ];
            if (count($items) >= $limit) break;
        }
        return ['items' => $items];
    }
}

SearchAutocomplete Component

<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 Details That Matter

Keyboard navigation — arrow keys up/down through the list, Enter to navigate, Escape to close. Implemented via keydown handlers and an activeIndex ref.

Match highlighting — highlight the part of the product name matching the query:

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

Grouped results — display separately: products, categories, blog articles. Three parallel requests or one endpoint returning grouped JSON.

Search history — last 5 queries from localStorage. Shown on focus when the field is empty.

Integration with Elasticsearch / MeiliSearch

If the catalog is large (100,000+ items) and Bitrix search is slow — autocomplete queries an external search engine:

• MeiliSearch — easy to set up, fast, open source
• Elasticsearch — more powerful, more complex, suited for enterprise

Indexing Bitrix products in MeiliSearch — via an agent that synchronizes data when b_iblock_element changes.

Real-World Case

A pharmacy chain: search by INN, trade names, and manufacturers — 15,000 items. Bitrix search produced irrelevant results (did not account for synonyms and typos). Solution: MeiliSearch with configured synonyms (e.g., "aspirin" → "acetylsalicylic acid"), Vue component with 250 ms debounce. Autocomplete response time — 30–80 ms. The built-in Bitrix search was kept for the full results page.

Delivery Timelines