Как в компоненте bitrix.search.title выводить ajax результаты по подстроке?

Для того чтобы реализовать поиск с выводом ajax результатов по подстроке в компоненте bitrix.search.title, необходимо внести некоторые изменения в исходный код компонента.

Прежде всего, необходимо отредактировать файл компонента bitrixcomponentsbitrixsearch.titlecomponent.php.

1. Добавьте следующие строчки кода в начало файла компонента:

use BitrixMainPageAsset;
Asset::getInstance()->addJs('/bitrix/js/main/jquery/jquery-2.1.3.min.js');
Asset::getInstance()->addJs('/bitrix/components/bitrix/search.title/ajax.js');

Это необходимо для подключения библиотеки jQuery и файла ajax.js, содержащего скрипт для обработки ajax запросов.

2. Замените функцию SetResultCacheKeys в этом же файле на следующий код:

function SetResultCacheKeys($arParam)
{
    $this->SetCacheKeys([]);
}

Это нужно для того, чтобы компонент не кешировал результаты поиска.

3. Внутри функции executeComponent, после строки $cache_id = $this->getCacheID($cache_path);, добавьте следующий блок кода:

if ($_REQUEST['ajax_call'] == 'y') {
    $this->arResult['AJAX_CALL'] = 'Y';
}

Этот код проверяет наличие ajax-запроса и устанавливает соответствующий флаг в arResult компонента.

4. Внутри функции executeComponent, после строки $this->includeComponentTemplate();, добавьте следующий блок кода:

if ($this->arResult['AJAX_CALL'] == 'Y') {
    $APPLICATION->RestartBuffer();
    $this->includeComponentTemplate('ajax');
    exit;
}

Этот код проверяет флаг AJAX_CALL в arResult компонента и, если он равен 'Y', подключает шаблон компонента с именем "ajax" и завершает выполнение скрипта.

5. Создайте файл шаблона компонента с именем ajax.php и разместите его в папке с шаблонами компонента. В этом файле разместите следующий код:

<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?>

<?php if (!empty($arResult['SEARCH'])): ?>
    <ul>
        <?php foreach ($arResult['SEARCH'] as $arItem): ?>
            <li>
                <a href="<?= $arItem['URL'] ?>"><?= $arItem['ITEM_ID'] ?></a>
            </li>
        <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p>No results found.</p>
<?php endif; ?>

Этот код отображает список найденных результатов, или выводит сообщение о том, что результаты не найдены.

6. Создайте файл с именем ajax.js и разместите его в папке /bitrix/components/bitrix/search.title/. В этом файле разместите следующий код:

$(function() {
    'use strict';

    var input = $('.search-title-ajax-input');
    var result = $('.search-title-ajax-result');

    input.on('input', function() {
        var query = $(this).val();

        if (query.length === 0) {
            result.hide();
            return;
        }

        $.ajax({
            url: window.location.pathname,
            type: 'GET',
            data: {
                ajax_call: 'y',
                q: query
            },
            success: function(data) {
                result.html(data).show();
            }
        });
    });
});

Этот код отслеживает ввод текста в поле ввода и отправляет ajax-запрос на сервер с введенным значением. Результаты поиска затем отображаются в блоке с классом search-title-ajax-result.

После этих изменений компонент bitrix.search.title будет показывать ajax результаты по подстроке вводимой пользователем.