Custom React Search Development for 1C-Bitrix
We often encounter a situation where the built-in Bitrix search can no longer handle the load of an e-commerce store. The standard search module with morphological indexing in b_search_content and b_search_stem tables responds in 800–1200 ms and does not support instant search. This is critical for catalogs with 50,000+ SKUs: customers leave without waiting for results. We develop custom React search for catalogs from 10,000 to 500,000 SKUs. Our experience — over 10 years in Bitrix development, dozens of implementations, including integration with 1C via CommerceML and trade catalogs of any complexity. For catalogs with 10,000 SKUs, infrastructure costs are minimal, and the conversion uplift from fast search reaches 15–20%.
Choosing a search engine
Elasticsearch / OpenSearch — justified for volumes >100,000 documents, full-text search with morphology, boost ranking, synonyms. Requires a separate server. Typesense — a simpler alternative with good performance, easier to administer. Suitable for medium catalog. Meilisearch — fast start, fuzzy search out of the box, good documentation. For catalogs up to 500,000 items. Custom SQL (Bitrix) — FULLTEXT INDEX in MySQL or tsvector in PostgreSQL. Works without additional infrastructure, sufficient for catalogs up to 50,000 SKUs.
Engine comparison:
| Engine | Volume | Performance | Infrastructure complexity |
|---|---|---|---|
| Elasticsearch | >100,000 | High | High |
| Meilisearch | up to 500,000 | High | Medium |
| Typesense | up to 300,000 | High | Low |
| SQL (MySQL/PostgreSQL) | up to 50,000 | Medium | None |
Meilisearch processes queries 10x faster than the native Bitrix search — confirmed by our tests for catalogs up to 500,000 items.
How to choose an engine for your catalog?
For most mid-range e-commerce stores (up to 100,000 SKUs), we recommend Meilisearch or custom PostgreSQL full-text. Elasticsearch only if you already have the infrastructure or require advanced search analytics.
Bitrix product indexing
Regardless of the chosen engine, data synchronization between Bitrix and the search index is needed. We use the OnProductUpdate event (1C-Bitrix product change event) to add a task to the background queue.
Example indexer code
// Обработчик события изменения товара \Bitrix\Main\EventManager::getInstance()->addEventHandler( 'catalog', 'OnProductUpdate', function(\Bitrix\Main\Event $event) { $productId = $event->getParameter('id'); \Local\Search\IndexQueue::add($producs ProductIndexer { public function indexProduct(int $productId): void { $product = \CIBlockElement::GetById($productId)->GetNext(); $prices = \CCatalogProduct::GetOptimalPrice($productId, 1, [], 'N', [], SITE_ID); $props = $this->getProductProperties($productId); $document = [ 'id' => $productId, 'name' => $product['NAME'], 'description' => strip_tags($product['DETAIL_TEXT']), 'brand' => $props['BRAND']['VALUE'], 'price' => $prices['RESULT_PRICE']['DISCOUNT_PRICE'], 'in_stock' => $props['QUANTITY']['VALUE'] > 0, 'category' => $this->getCategoryPath($product['IBLOCK_SECTION_ID']), ]; $this->searchEngine->upsertDocument($document); } } Synchronization via queue (\Bitrix\Main\Application::getInstance()->addBackgroundJob()) — changes are processed asynchronously, without slowing down the main thread.
React search component
Instant search with debounce is fundamental for UX. Minimum delay for a live feel: 200–300 ms.
function SearchBox() { const [query, setQuery] = useState(''); const debouncedQuery = useDebounce(query, 250); const { data, isLoading } = useQuery({ queryKey: ['search', debouncedQuery], queryFn: () => searchProducts(debouncedQuery), enabled: debouncedQuery.length >= 2, staleTime: 10_000, }); return ( <div className="search-wrapper"> <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Поиск товаров..." /> {debouncedQuery.length >= 2 && ( <SearchDropdown results={data} isLoading={isLoading} /> )} </div> ); } The search dropdown is split by categories: 'Products', 'Categories', 'Brands', 'Articles'. Categorization is done server-side or on the front end from a unified response.
Why implement search analytics?
Search analytics is an underrated tool. Zero-result queries directly indicate missing products that customers are looking for. Low CTR queries reveal mismatched expectations. We set up click tracking in GA4 and a custom local_search_analytics table, allowing targeted ranking adjustments.
Case study: a construction hypermarket
A building materials store, 85,000 SKUs, 12,000 unique search queries per day. Problem: built-in Bitrix search couldn't find products with typos (e.g., 'шпатлёфка' vs 'шпатлёвка'), didn't support SKU search, and had 800–1200 ms response time.
We chose Meilisearch (single server, sync via Bitrix queue).
Implementation: Index includes: name, description, brand, SKU, synonyms (a separate table in Bitrix with 'query → correct term' pairs). Fuzzy search with typoTolerance — Meilisearch handles typos automatically. React dropdown — 4 sections: top 4 products, categories (if query matches a category name), brands, 'View all results'. Fixed dropdown height (max 480 px), scrollable list.
| Metric | Before | After |
|---|---|---|
| Search response time | 800–1200 ms | 35–80 ms |
| Zero-results rate | 18% | 4% |
| CTR from search | 34% | 61% |
| SKU findability | No | Yes |
Full results page
For the full results page (/search/?q=шпатлёвка) — a React application with a side filter (same components as the catalog), sorting, pagination. URL syncs with all parameters. Highlighting — matches are highlighted in search results. Meilisearch returns a _formatted field with <em> tags, styled in React.
How does React search development proceed?
- Catalog analysis: volume, infoblock structure, typical queries.
- Engine selection and index configuration with synonyms and stop words.
- Synchronization: writing the indexer, setting up queues.
- Development of React components: instant search, dropdown, results page.
- Analytics integration: click tracking, zero-results monitoring.
- Testing and optimization: A/B speed tests, ranking adjustments.
What's included
- Selection of the search engine based on volume and budget
- Index setup and synchronization with the Bitrix catalog
- React development: instant search, dropdown, full results page
- Configuration of synonyms, stop words, and boost ranking
- Analytics: click tracking, zero-results monitoring
- Documentation, access handover, team training
- Post-project support: 3-month warranty
Timeline and cost
Cost is calculated individually after a catalog audit. Instant search with a dropdown — from 2 weeks. Full results page plus analytics — from an additional 2 weeks. Contact us — we'll assess your project for free.
We guarantee: 10+ years of Bitrix experience, certified specialists, 15+ successful custom search implementations. Get a consultation — write to us.