Поисковый запрос. Или фильтр. Совместная обработка

Иногда поиск может вестись как по определенному списку, так и по нескольким категориям, где список отсутствует.
Вот например, где списка нет, и он не нужен.
Яндекс. Поищем картинки с Журавликом
https://yandex.ru/images/search?text=%D0%B6%D1%83%D1%80%D0%B0%D0%B2%D0%BB%D1%8C&redircnt=1434356569.1

Все просто: хотели журавлика, получили. Но попробуйте посмотреть всю категорию «Картинки» . https://yandex.ru/images/ — здесь не будет ни списка всех картинок, ни фильтров.

Почему нет списка всех картинок?

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

Теория: совместная работа поисковой строки и списка сущностей

Перед нами обычный список...

... а еще у нас есть категории поиска и есть фильтры для работы со списком и главная поисковая строка. Так как же им всем работать в тандеме?

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

Как это выглядит на практике

При поиске снижаем акцент на поисковой строке и даем понять, что сейчас работа ведется со списком (такое поведение актуально только где есть списки!)
Как после поиска вернуться ко списку? Здесь эту задачу выполняет крестик напротив фильтрующего инпута, а также хлебные над заголовком: вынести крестик за инпут

И тогда после удаления поискового запроса мы сможем наблюдать список в следующем виде:

Вариант когда ничего не найдено в фильтрах:

Поделиться
Отправить
Запинить
2015   ux
Популярное