Автокомплит ComboBox

Автокомплит — это поле ввода со списком подсказок.

Когда использовать

Автокомплит используют:

  • для выбора значения из справочника,
  • для добавления своего значения в справочник.

Используйте автокомплит, если значений в справочнике слишком много, чтобы искать их глазами. Если значений не больше 25, можно использовать раскрывающийся список или группу радиокнопок.

Виды полей

Автокомплит со стрелкой

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

Используйте этот вариант автокомплита, если:

  1. Справочник содержит не больше 50 строк.
  2. Пользователю удобно выбирать значение, просматривая список.

Контекст использования такого автокомплита тот же, что и у раскрывающегося списка. Его преимущество в том, что пользователь может ввести значение самостоятельно, и автокомплит найдет его в списке. Но тут есть и недостаток — нужно проверять введенные значения.

Автокомплит без стрелки

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

Используется такой автокомплит, если в справочнике больше 50 строк.

Описание работы

Работа с клавиатурой

Tab

Переход к следующему контролу

Переключение между строками. При достижении первой или последней строки переключение останавливается

Ничего

Esc

Скрывает список, фокус не исчезает. Подсказка вновь появится при вводе или удалении символа

Space

Ввод пробела

Enter

Выбор подсвеченного значения из списка и переход к следующему полю в форме. Если список пуст/не успел догрузиться, нажатие Enter ни к чему не приводит.

Состояние по умолчанию

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

 

Плейсхолдер подсказывает, что достаточно ввести первые буквы:

Фокус по пустому полю

При получении фокуса плейсхолдер становится чуть светлее, открывается список вариантов.

Когда курсор находится над списком, скролинг страницы блокируется.

По умолчанию список раскрывается вниз. Минимальная высота раскрывающегося списка 200 px, максимальная 450 px. Если снизу менее 200 px до конца страницы, список раскрывается вверх.

 

При клике или получению фокуса плейсхолдер в поле становится чуть светлее, но список вариантов не открывается.

Начало ввода

Если обработка запроса для построения списка занимает дольше 0,5 секунды, показываем лоадер минимум 1 секунду. Если список уже открыт, и при получении ответа возникла задержка — показываем лоадер, список до обновления остается в прежнем состоянии.

Нажатие Enter при пустом/не загрузившемся списке ни к чему не приводит, фокус остается в этом же поле.

Лоадер специальный, серый, не привлекающий слишком много внимания:

Если происходит ошибка сервера, показываем сообщение:

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

 

Если обработка запроса для построения списка занимает дольше 0,5 секунды, показываем лоадер минимум 1 секунду. Если список уже открыт, и при получении ответа возникла задержка — показываем лоадер, список до обновления остается в прежнем состоянии.

Нажатие Enter при пустом/не загрузившемся списке ни к чему не приводит, фокус остается в этом же поле.

Лоадер специальный, серый, не привлекающий слишком много внимания:

Если происходит ошибка сервера, показываем сообщение:

При вводе первого символа список фильтруется. Первый пункт в списке подсвечивается. Оптимальное количество строк в списке — 5. Если после фильтрации список может быть очень большим, это число можно увеличивать до 20.

Нет соответствий

Ничего

Enter

Ничего

 

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

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

Потеря фокуса без выбора пункта из списка

Если ничего не найдено, показываем ошибку:

Если введенное значение посимвольно совпадает со значением из справочника, при потере фокуса выбираем его:

Если список не успел загрузиться, показываем ошибку:

Потеря фокуса без выбора пункта из списка

Если ничего не найдено, показываем ошибку:

Если введенное значение посимвольно совпадает со значением из справочника, при потере фокуса выбираем его:

Если список не успел загрузиться, показываем ошибку:

Сделан выбор

 

Фокус по заполненному полю

При получении фокуса поле ведет себя, как раскрывающийся список: введенное значение выделяется, раскрывается список, прокрученный до выбранного значения:

 

При получении фокуса введенное значение выделяется:

Настройка «Избранные варианты»

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

Фокус по пустому полю

Эти варианты показываются над основным списком, отделяются чертой.

 

Показывается список из 3-5 вариантов с заголовком. Заголовок нужен для того, чтобы было понятно, что это не полный список:

Настройка «Указание своего значения»

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

Потеря фокуса без выбора значения в подсказке

 

Настройка «Составной список»

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

Основное значение — короткое, емкое и уникальное.

Начало ввода

 

Выбор сделан

После выбора дополнительное значение показывается в поле серым цветом. Если оно полностью не входит, при наведении показывается хинт:

 

После выбора дополнительное значение показывается в поле серым цветом. Если оно полностью не входит, при наведении показывается хинт:

Фокус по заполненному полю

При получении фокуса тултип исчезает.

 

 

Настройка «Поиск по вхождению»

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

Чтобы понять, стоит ли использовать поиск по вхождению, задайте себе вопрос: точно ли пользователь знает начало строки? Если нет — используйте поиск по вхождению.

Совпадения подсвечиваются жирным начертанием Segoe UI Negreta.

Начало ввода

 

Настройка «Добавление своего значения»

Если пользователь сам наполняет справочник, то при вводе нового значения текст «Нет совпадений» не показывается. Значение добавляется в список и при следующем заполнении предлагается наравне с остальными.

Нет соответствий

 

Фокус потерян без выбора из справочника

 

Настройка «Добавление карточки»

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

Фокус на пустом поле

По умолчанию выбран пункт «Добавить», чтобы пользователь мог нажать Enter и быстро перейти к добавлению новой карточки:

 

По умолчанию выбран пункт «Добавить», чтобы пользователь мог нажать Enter и быстро перейти к добавлению новой карточки:

Ввод первого символа

В открывающемся лайтбоксе добавления карточки поле «Название» предзаполяется уже введенным в поле значением.

 

В открывающемся лайтбоксе добавления карточки поле «Название» предзаполяется уже введенным в поле значением.

Нет совпадений

 

Потеря фокуса

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

 

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

Размер

Список с подсказками всегда открывается вниз. Оптимальная высота списка 300-450 px. Чтобы список не выходил за границу страницы, проследите чтобы под ним было достаточное количество места.

Дизайн

Внешне поле ничем не отличается от обычного поля ввода. Если поле с выбором, в правой части есть стрелочка  — символ из шрифта Kontur Iconic.

Поле может быть трех размеров, как и обычное поле ввода.

Название поля выравнивается по базовой линии текста в поле:

Стиль списка подсказок совпадает с раскрывающимся списком.

Состояния: