Битрикс - самодостаточная платформа с кучей крутых решений и, на наш взгляд (как разработчиков), с очень правильными требованиями в организации кода и формировании собственных компонентов. Но, как говорится, – «И на старуху, бывает порнуха». И нет-нет, да найдется компонент, который то хранит в себе часть активной логики, которая должна быть в шаблонах, то стили, то скрипты – все это раздражает и мешает жить.
Сегодня поговорим о компоненте поиска на сайте, а именно о том, что показывает нам красивые подсказки (bitrix:search.title). Думаю, многие обожглись на нем, пытаясь заставить его работать в плавающей панели и удивлялись тому, что поиск сваливался в левый верхний угол экрана. Причина такому поведению - то, что логика расчета и позиционирования расположена не в шаблоне, а в компоненте.
Ужас, правда?! Будем исправлять. Одно решение я уже писал в блогах разработчиков (), но оно оказалось с погрешностями в смысле скорости загрузки, и на медленном соединении не всегда быстро и красиво отрабатывало. Т.е. мы могли наблюдать ту же самую проблему, либо скаканье результата быстрого поиска.
Что ж, это плохо, и решение у нас по факту одно: собрать свое решение на основе Битрикса, а точнее - доработать то, что уже существует. Для начала перенесем компонент search.title в свое пространство имен. У нас это denisoft, соответственно путь следующий: /local/components/denisoft/search.title/. И не забываем, что теперь нам вызывать компонент следующим ключом: denisoft:search.title.
Сначала на 355 строке в скрипте меняем код:
this.RESULT = document.body.appendChild(document.createElement("DIV"));
на:this.RESULT = this.CONTAINER.appendChild(document.createElement("DIV"));
Просто обратите внимание на то, что мы меняем целевого родителя для блока с результатом.
Отлично, теперь нам необходимо обнулить сумасшедшее позиционирование. Смотрим на строки 338-340 – они у нас отвечают за позиционирование результата быстрого поиска. Позиционирование реализуется относительно всего окна, поэтому эти строки нещадно удаляем.
А дальше дело стилей. Правите их под себя и получаете отличный кастомизированный компонент, который можно вставлять в плавающие блоки, и результат его выдачи будет зависеть от поля ввода, а не от всего документа.
Как результат, получаем следующее:
Красиво и правильно. Если у вас не получилось, обращайтесь к нам за помощью.