Живой поиск на Битрикс. Пример реализации.

Основные задачи:

• реализовать поиск таким образом, чтобы после ввода поискового запроса в строку, ниже этой строки появились результаты поиска
• запрос на получение результата должен происходить только после окончания ввода поискового запроса

Окей, поехали!

Примерная вёрстка самого блока с поисковой строкой и div-ником, куда будем добавлять результаты поиска:

<form action="/search/index.php">
            <input type="search" maxlength="50" size="15" value="" name="q" id="q" autocomplete="off">
    &nbsp;
    <button class="reset" id="reset_live_search" value="reset" type="reset"></button>
    <div id="search_result">
        <div class="live-search">
        </div>    
    </div>
</form>

Т.к. поиск доступен в шапке сайта, добавим соответствующие скрипты поиска и стилизации результатов:

//подрубаем поиск:
$APPLICATION->AddHeadScript('/search/ajax_search.js');
$APPLICATION->AddHeadScript('/search/jquery.mCustomScrollbar.js');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/ajax_search.css");
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/jquery.mCustomScrollbar.min.css");

Теперь посмотрим, что лежит в нашем ajax_search.js:

function get_result (){
    //очищаем результаты поиска
    $('#search_result').html('');
    //пока не получили результаты поиска - отобразим прелоадер
    $('#search_result').append('<div><img width="150" src="/search/preloader.GIF"></div>');
    $.ajax({
        type: "POST",
        url: "/search/ajax_search.php",
        data: "q="+q,
        dataType: 'json',
        success: function(json){
            //очистим прелоадер
            $('#search_result').html('');
            $('#search_result').append('<div class="live-search"></div>');
            //добавляем каждый элемент массива json внутрь div-ника с class="live-search" (вёрстку можете использовать свою)
            $.each(json, function(index, element) {
                $('#search_result').find('.live-search').append('<a href="'+element.URL+'" class="live-search__item"><span class="live-search__item-inner"><span class="live-search__item-name"><span class="live-search__item-hl">'+element.TITLE+'</span></span>'+element.BODY_FORMATED+'</span></a>');
                //console.log (element.BODY_FORMATED);
            });
            //стилизуем скроллинг
            $('.live-search').mCustomScrollbar({
                scrollInertia: 500
            });
        }
    });
}

var timer = 0;
var q = '';

$( document ).ready(function() {
    $('#q').keyup(function() {
        q = this.value; 
        clearTimeout(timer);
        timer = setTimeout(get_result, 1000);
    }); 
    $('#reset_live_search').click(function() {
        $('#search_result').html('');
    });
});

keyup функция осуществляем вызов функции get_result(), которая собственно и заполняет div-ник с id=»search_result» по аяксу.

mCustomScrollbar — это просто вызов стилизации (можете отключить).

Данные от /search/ajax_search.php мы получаем в формате JSON.

С JS составляющей всё понятно, теперь посмотрим, что происходит в ajax_search.php:

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/bitrix/modules/main/include/prolog_before.php");
?>

<?
if ((CModule::IncludeModule('search'))&&(CModule::IncludeModule('iblock'))){
    $q = $_REQUEST['q'];
    $obSearch = new CSearch;
    $obSearch->Search(array(
                            "QUERY" => $q,
                            "SITE_ID" => LANG,
                            "MODULE_ID" => 'iblock',
                            "CHECK_DATES" => 'Y',
                            "PARAM2" => "8"
                            )
                    );
    $result = array();
    while ($res = $obSearch->GetNext()){
        $id = $res['ITEM_ID'];
        //если нашли раздел:
        if (strripos($id, 'S')!==false){
                $result_item['TITLE'] = $res['TITLE'];
                $result_item['URL'] = $res['URL'];
                $result_item['BODY_FORMATED'] = $res['TITLE_FORMATED'];
                $result[] = $result_item;  
        }
        //если S-ки нету, то
        else{
                $result_item['TITLE'] = $res['TITLE'];
                $result_item['URL'] = $res['URL'];
                $result_item['BODY_FORMATED'] = $res['BODY_FORMATED']; 
                $result[] = $result_item;
                
        }
    }
    echo json_encode($result);
}
?>

В данном случае поиск осуществляется методом Search Битриксового класса CSearch. В PARAM2 пишем в каком инфоблоке ищем. Результаты поиска запихиваем в массив $result. Обратите внимание, что в $res[‘ITEM_ID’] может быть как элемент, так и раздел. В зависимости от того, что нашли, в $result_item[‘BODY_FORMATED’] пихаем либо название раздела, либо кусок текста из найдённого элемента инфоблока.

Собственно вся магия :-)