1. Пошаговая инструкция по установке скрипта
   • Добавление кода в шаблон "Вид материалов" (Поиск по сайту)
   • Добавление стилей в шаблон "Таблица стилей (CSS)"
   • Установка скрипта в шаблон "Нижняя часть сайта"
2. FAQ по гибкой настройке скрипта
   • Как настроить количество выводимых результатов в поиске?
   • Можно ли выводить изображение и описание материала в поиске?

Динамический поиск c подсказками — это функционал, который позволяет пользователям находить нужную информацию на сайте в режиме реального времени, без необходимости обновления страницы. Такой поиск делает взаимодействие с сайтом более удобным, быстрым и современным, и это особенно полезно для крупных каталогов, кино-сайтов или блогов.

В этой инструкции вы узнаете, как с помощью скрипта настроить и интегрировать динамический поиск на вашем сайте, чтобы он стал интуитивно понятным и максимально функциональным для вашей аудитории.

Преимущества данного решения

• Простая установка: Легко интегрируется на сайт с минимальными изменениями в шаблонах и стилях.
• Экономия времени: Результаты обновляются автоматически при вводе запроса, без необходимости перезагружать страницу. 
• Универсальность: Скрипт поддерживает работу как с формой глобального поиска, так и с формой расширенного поиска по модулям.
• Гибкость и кастомизация: Возможность добавлять новые элементы, такие как изображения и описания материалов, а также настраивать количество выводимых результатов.

Демо-сайт скрипта

Пошаговая инструкция для установки скрипта

1. Добавление кода в шаблон "Вид материалов" (Поиск по сайту)

Перейдите во вкладку "Дизайн" → "Управление дизайном" → "Редактирование шаблонов" → "Поиск по сайту" → "Вид материалов" и добавьте следующий код:

<div id="mat$NUMBER$" style="display:none;">
 <div>$TITLE$</div>
 <div>$ENTRY_URL$</div> 
</div>

Этот код используется для передачи данных о результатах поиска (заголовков и ссылок) от сервера к клиентскому скрипту, который обработает их и отобразит в динамическом поиске.

2. Добавление стилей в шаблон "Таблица стилей (CSS)"

Далее перейдите в шаблон "Таблица стилей (CSS)" и добавьте следующий код для стилизации блока динамического поиска:

div[id^="sData-"] {
 position: absolute;
 display: flex;
 top: 10px;
 background: #fff;
 box-shadow: 0 0 5px #969696;
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 font-size: 14px;
 border-radius: 6px;
 z-index: 1;

}

div[id^="sData-"] a {
 display: flex;
 padding: 2px 5px;
 text-decoration: none;
 color: #020203;
}

div[id^="sData-"] a:hover {
 background: #507fff33;
 color: #507fff;
}

div[id^="sData-"] .sTit {
 display: flex;
 padding: 10px;
 word-wrap: break-word;
 white-space: normal;
 overflow-wrap: break-word;
}

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

3. Установка скрипта в шаблон "Нижняя часть сайта"

Теперь вам необходимо скачать JS-скрипт, который отвечает за функциональность динамического поиска.

Скачать JS-скрипт

После загрузки файла, перейдите в файловый менеджер вашего сайта и поместите скрипт в папку "js".

Затем откройте шаблон "Нижняя часть сайта" и добавьте следующий код:

<script src="/js/searchFast.js"></script>

После выполнения всех шагов скрипт готов к работе, и вы можете проверить его функциональность прямо на сайте, выполнив поиск в вашей форме.

FAQ по гибкой настройке скрипта

1. Как настроить количество выводимых результатов в поиске?

Чтобы изменить количество результатов, которые отображаются в блоке динамического поиска, отредактируйте условие в функции searchQuery. Найдите следующий блок кода:

items.forEach(function(item, idx) {
 if (idx < 10) { // Здесь указано ограничение на 10 результатов
 let id = item.id;
 let title = item.querySelector('div:nth-child(1)').textContent;
 let url = item.querySelector('div:nth-child(2)').textContent;

 data.push({
 title: title,
 url: url
 });
 }
});

В этом фрагменте измените число 10 на нужное вам количество результатов. Например, если вы хотите отображать 20 результатов, измените строку на:

if (idx < 20) {

После сохранения изменений скрипт начнет отображать указанное количество результатов.

2. Можно ли выводить изображение и описание материала в поиске?

Да, вывод изображения и описания материала в результатах поиска возможен. Для этого необходимо внести небольшие изменения в шаблон HTML и скрипт.

Изменения в HTML

Перейдите в шаблон "Вид материалов" и измените блок результатов, добавив переменные $IMG_URL$ (ссылка на изображение) и $MESSAGE$ (описание материала):

<div id="mat$NUMBER$" style="display:none;">
<div>$TITLE$</div>
<div>$ENTRY_URL$</div>
<div>$IMG_URL$</div>
<div>$MESSAGE$</div>
</div>

Изменения в скрипте

В функции searchQuery необходимо обновить код для извлечения и обработки новых данных. Для этого найдите следующий код:

let title = item.querySelector('div:nth-child(1)').textContent;
let url = item.querySelector('div:nth-child(2)').textContent;

Добавьте строки для извлечения изображения и описания:

let img = item.querySelector('div:nth-child(3)').textContent;
let message = item.querySelector('div:nth-child(4)').textContent;

Далее найдите блок, где данные добавляются в массив data, и измените его следующим образом:

data.push({
 title: title,
 url: url,
 img: img,
 message: message
});

Для отображения изображения и описания обновите шаблон, возвращаемый этой функцией:

function buildRow(item) {
 return `
 <a href="${item.url}">
 <img src="${item.img}" alt="${item.title}" style="max-width: 100px; margin-right: 10px;">
 <div>
 <span class="sTit">${item.title}</span>
 <p>${item.message}</p>
 </div>
 <div style="clear:both;"></div>
 </a>
 `;
}

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