Частенько стала возникать потребность вставить в плавающую шапку сайта поиск по заголовкам. И столкнулись с такой проблемой, что при скролле страницы, результат быстрого поиска прилипает к верхнему левому краю экрана. Решили это следующим образом:
Файл 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>
|
Т.е. обращаем внимание на закоменченную часть кода в script. Ее мы убираем, а сам вызванный объект JCTitleSearch приравниваем какой то произвольной переменной. Соответственно от нее мы дальше можем наследоваться, как это сделано в коде выше по событию onkeyup для поля. Обращаем внимание на используемый метод search.onChange - это единственный метод с callback функцией, с помощью которого мы в принципе и будем манипулировать результатом поисковой выдачи используя свою функцию.
Функцию я написал следующую (но каждый может ее поправить под свои потребности):
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"
}
});
}
}
}
})(); |
Не обращаем особого внимания на строчку if(pos.top < 70) - это фикс для проекта над которым я работаю в данным момент. Особое внимание лучше уделить BX('mitBody') - это по сути тег body с id="mitBody" (придумаете свое если принципиально). Соответственно, что мы делаем? Полученный идентификатор поля позволяет нам с помощью метода BX.pos() узнать его реальное положение относительно видимой части сайта. Ну а дальше простым изменением элемента, который нам выводит быстрые результаты поиска мы его позиционируем ниже и левее самого поля ввода.
Собственно это все, надеюсь кому то помог с данной проблемой. А ну и конечно:
Было:
Стало: