Когда мы начали разрабатывать компонент Combobox для нашей библиотеки, мы столкнулись с вопросами, как правильно должен работать поиск:
Нужно ли выделять совпадения в выпадающем списке?
Совпадения должны быть по первым буквам или нет?
Если нет, нужно ли показывать выше то, что совпадает по первым буквам?
Мы стали смотреть, как ведет себя такой компонент в других дизайн-системах и в итоге решили разобраться, какие виды поиска бывают в интерфейсе.
Характеристики поиска
Место поиска
Поиск может находиться на странице, в модалке или в попапе.
![Пример поиска на странице в Яндекс.Директе Пример поиска на странице в Яндекс.Директе](https://habrastorage.org/getpro/habr/upload_files/9c1/6b5/e2a/9c16b5e2a91c8cad13c746e3870d5663.png)
Видим, по чему ищем
сразу видим,
не видим.
![Самый известный пример поиска, когда не видим, по чему будем искать Самый известный пример поиска, когда не видим, по чему будем искать](https://habrastorage.org/getpro/habr/upload_files/801/06a/2c0/80106a2c0d7879b2ba34ddf4c98bb62a.png)
Начало поиска
По запросу — поиск начнется только после нажатия на кнопку или Enter на клавиатуре.
На лету — результат поиска обновляется с появлением каждого нового символа в поисковой строке.
![Пример поиска на лету по справочнику городов и отелей в Авиасейлс Пример поиска на лету по справочнику городов и отелей в Авиасейлс](https://habrastorage.org/getpro/habr/upload_files/c00/c75/14b/c00c7514b6b0d3558039874fe5fc2b19.gif)
Соответствие
Частичное — означает, что в поле достаточно ввести несколько символов от желаемого запроса, и в результатах поиска будут все варианты, в которых есть эти символы.
Частичное по первым символам — тот же принцип, что и выше, но в результатах поиска будут все варианты, которые начинаются с введенных символов.
![Частичное и частичное по первым символам Частичное и частичное по первым символам](https://habrastorage.org/getpro/habr/upload_files/528/a0f/b3b/528a0fb3b6367cfdd3807279cb410b6c.png)
Полное соответствие скорее исключение, поэтому в поиске его нужно использовать только в том случае, если вы уверены, что пользователь будет это понимать, иначе у него сложится впечатление, что поиск сломан.
![Полное соответствие Полное соответствие](https://habrastorage.org/getpro/habr/upload_files/843/f2d/c07/843f2dc07a4201976c6276036e4c239d.png)
Сортировка
Стандартная — варианты в результате поиска сохраняют свою последовательность в сортировке.
По релевантности — в этом случае сортировка меняется и выше показываются те варианты, которые наиболее близки к поисковому запросу.
![Стандартная сортировка и по релевантности Стандартная сортировка и по релевантности](https://habrastorage.org/getpro/habr/upload_files/41d/7e1/924/41d7e192408cc1e670adce8f3e985bc9.png)
Выделение совпадений
Если поиск идет по текстовым блокам, в них лучше выделять то, что пользователь ввел в поле. Это поможет быстрее понять, какой из показанных вариантов больше всего соответствует запросу.
![Без выделения и с выделением Без выделения и с выделением](https://habrastorage.org/getpro/habr/upload_files/e90/323/d30/e90323d303d2d82305186bb46c116ade.png)
Комбинируем эти характеристики для разных кейсов в нашем интерфейсе
1. По странице
Место поиска: на странице
Видим, по чему ищем: сразу видим
Начало поиска: на лету
Соответствие: частичное
Сортировка: стандартная
Совпадения: без выделения
Используем, когда нужно найти что-то на конкретной странице сайта.
![](https://habrastorage.org/getpro/habr/upload_files/933/244/8a4/9332448a42005333e6a58d78fd7fb12a.png)
2. По всему сайту
Место поиска: в модалке
Видим, по чему ищем: не видим
Начало поиска: по запросу
Соответствие: частичное
Сортировка: по релевантности
Совпадения: с выделением
Нужен для тех случаев, когда на сайте много страниц и может быть непонятно, на каких из них искать нужную информацию.
![](https://habrastorage.org/getpro/habr/upload_files/eb8/08c/7a6/eb808c7a6854895c7fb5a415f415a942.png)
3. В справочнике по тексту
Место поиска: в попапе
Видим, по чему ищем: сразу видим / не видим
Начало поиска: на лету
Соответствие: частичное по первым символам
Сортировка: стандартная
Совпадения: с выделением
Используется в компонентах, например, в ComboBox. В нашей дизайн-системе выпадающий список является попапом, т.к. он не блокирует работу со страницей. Если значение в выпадающем списке состоит из нескольких слов, то проверяется на совпадение не только самое первое слово, проверка на совпадение идет через следующие разделители: пробел, точка, дефис. Пример: Urban Gorn; urban.gorn@mail.ru; Urban-Gorn. Во всех трех случаях поиск по слову "Gorn" сработает.
![](https://habrastorage.org/getpro/habr/upload_files/31a/0c9/0c1/31a0c90c1813ba2f8d918362fae2fcdd.png)
4. В справочнике по цифрам
Место поиска: в попапе
Видим, по чему ищем: сразу видим / не видим
Начало поиска: на лету
Соответствие: частичное
Сортировка: по релевантности
Совпадения: с выделением
Используется также в компонентах, разница лишь в том, что справочник должен состоять из числовых значений. Поэтому в данном случае соответствие частичное, потому что мы не знаем, как пользователь будет искать число - с начала, с конца или с середины.
![](https://habrastorage.org/getpro/habr/upload_files/768/9d5/d46/7689d5d46533284931486ab46e782ef2.png)
Поиск ≠ фильтрация по названию
В нашем интерфейсе мы разделяем поиск и фильтрацию по названию. Поиском пользоваться проще, он понятнее, но с помощью фильтра можно решать более сложные задачи, например, искать через комбинации «Содержит / Не содержит». В фильтре, в отличии от поиска, после ввода значения создается Chip, их может быть несколько и они могут дополнять друг друга.
На странице рекомендуется использовать что-то одно, в зависимости от того, какие задачи решает пользователь.
![](https://habrastorage.org/getpro/habr/upload_files/484/289/902/484289902912e26ceb79cf0d4defc287.png)
Спасибо Сергею Токареву за помощь в подготовке материала.