Частенько стала возникать потребность вставить в плавающую шапку сайта поиск по заголовкам. И столкнулись с такой проблемой, что при скролле страницы, результат быстрого поиска прилипает к верхнему левому краю экрана. Решили это следующим образом:
Файл template.php компонента search.title модифицировали следующим образом:
Т.е. обращаем внимание на закоменченную часть кода в script. Ее мы убираем, а сам вызванный объект JCTitleSearch приравниваем какой то произвольной переменной. Соответственно от нее мы дальше можем наследоваться, как это сделано в коде выше по событию onkeyup для поля. Обращаем внимание на используемый метод search.onChange - это единственный метод с callback функцией, с помощью которого мы в принципе и будем манипулировать результатом поисковой выдачи используя свою функцию.
Функцию я написал следующую (но каждый может ее поправить под свои потребности):
Не обращаем особого внимания на строчку if(pos.top < 70) - это фикс для проекта над которым я работаю в данным момент. Особое внимание лучше уделить BX('mitBody') - это по сути тег body с id="mitBody" (придумаете свое если принципиально). Соответственно, что мы делаем? Полученный идентификатор поля позволяет нам с помощью метода BX.pos() узнать его реальное положение относительно видимой части сайта. Ну а дальше простым изменением элемента, который нам выводит быстрые результаты поиска мы его позиционируем ниже и левее самого поля ввода.
Собственно это все, надеюсь кому то помог с данной проблемой. А ну и конечно:
Было:
Стало:
Файл template.php компонента search.title модифицировали следующим образом:
<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); $this->setFrameMode(true); ?> <? $INPUT_ID = trim($arParams["~INPUT_ID"]); if (strlen($INPUT_ID) <= 0) $INPUT_ID = "title-search-input"; $INPUT_ID = CUtil::JSEscape($INPUT_ID); $CONTAINER_ID = trim($arParams["~CONTAINER_ID"]); if (strlen($CONTAINER_ID) <= 0) $CONTAINER_ID = "title-search"; $CONTAINER_ID = CUtil::JSEscape($CONTAINER_ID); if ($arParams["SHOW_INPUT"] !== "N"):?> <div class="mit-search abcolor" id="<? echo $CONTAINER_ID ?>"> <fo rm action="<? echo $arResult["FORM_ACTION"] ?>"> <input class="pcolor-m-bg pcolor" onke yup="search.onChange(function () {BX.MIT.SearchTitle.change('<? echo $CONTAINER_ID ?>');});" id="<? echo $INPUT_ID ?>" type="text" placeholder="<?= GetMessage("CT_BST_SEARCH_PLACEHOLDER") ?>" name="q" value="" maxlength="50" autocomplete="off"/> <!-- <input name="s" type="submit" value="<?= GetMessage("CT_BST_SEARCH_BUTTON"); ?>"/> --> </form> </div> <? endif ?> <sc ript> //BX.ready(function () { var search = new JCTitleSearch({ 'AJAX_PAGE': '<?echo CUtil::JSEscape(POST_FORM_ACTION_URI)?>', 'CONTAINER_ID': '<?echo $CONTAINER_ID?>', 'INPUT_ID': '<?echo $INPUT_ID?>', 'MIN_QUERY_LEN': 2 }); //}); </sc ript> |
Функцию я написал следующую (но каждый может ее поправить под свои потребности):
BX.namespace('BX.MIT.SearchTitle'); (function() { BX.MIT.SearchTitle = { change: function(id) { if(BX('mitBody').querySelector('div.'+id+'-result)) { var pos = BX.pos(BX(id)); var el = BX('mitBody').querySelector('div.'+id+'-result'); var top = 70; if(pos.top < 70) { top = pos.top + pos.height; } BX.adjust(el, { style : { 'margin-left': pos.left + "px", left: "0px", top: top + "px", position:"fixed" } }); } } } })(); |
Собственно это все, надеюсь кому то помог с данной проблемой. А ну и конечно:
Было:
Стало: