Строка поиска открывается по нажатию на иконку поиска в Шапка (header).
Для мобильной версии: при открытии строки поиска иконка геопозиции, каталога и логотип в Шапка (header) скрываются, отображается иконка закрытия.
Для мобильной версии: при открытии строки поиска в шапке с черным фоном 55% прозрачности, ее фон меняется на черный (85% прозрачности)
При нажатии на плейсхолдер в строке поиска в шапке с бежевым фоном 55% прозрачности, ее фон меняется на бежевый (85% прозрачности)
При нажатии на плейсхолдер в строке поиска в шапке с черным фоном 55% прозрачности, ее фон меняется на черный (85% прозрачности)
Для планшетной и десктопной версии: при открытии строки поиска иконка геопозиции в Шапка (header) меняет свое отображение (убирается подчеркивание иконки).
Каретка набора текста становится активна в поле для набора текста при нажатии на плейсхолдер.
Поле сворачивается обратно в иконку поиска (закрывается) при нажатии в любом месте экрана вне поля.
Для мобильной версии: поле сворачивается обратно в иконку поиска (закрывается) при нажатии на иконку закрытия.
Поиск ведется по всему контенту сайта.
Элементы строки поиска представлены в таблице ниже.
Элемент
Тип
Критерии
Этап реализации
1
Строка поиска
Поле
1. Содержит иконку поиска и поле для ввода запроса.
При вводе символов строку поиска, система выводит выпадающий список с подсказками со ссылками на контент, содержащий в начале названия введенную пользователем комбинацию символов (до 4-х строчек).
По нажатию на одну из подсказок система перенаправляет пользователя на страницу, содержащую контент из подсказки.
Если подсказка одна, то система также перенаправляет пользователя на страницу, содержащую контент из подсказки по нажатию на кнопку Enter.
После перенаправления пользователя система сворачивает строку поиска в иконку.
Если подходящий контент по запросу пользователя не существует, система выводит в выпадающем списке текст “По запросу [запрос] ничего не найдено”, где [запрос] - текст запроса пользователя. | MVP |
| 2 | Выпадающий список подсказок | Выпадающий список | 1. Список подсказок обновляется динамически, без перезагрузки страницы, после ввода/удаления каждого следующего символа.
Совпадающая комбинация символов в подсказке выделяется жирным шрифтом и цветом. | MVP |