Основные задачи:
- реализовать поиск таким образом, чтобы после ввода поискового запроса в строку, ниже этой строки появились результаты поиска
- запрос на получение результата должен происходить только после окончания ввода поискового запроса
Окей, поехали!
Примерная вёрстка самого блока с поисковой строкой и div-ником, куда будем добавлять результаты поиска:
<form action="/search/index.php"> <input type="search" maxlength="50" size="15" value="" name="q" id="q" autocomplete="off"> <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’] пихаем либо название раздела, либо кусок текста из найдённого элемента инфоблока.
Собственно вся магия :-)