Определение

Autoсomplete (Автозаполнение) — это свойство, которое при вводе текста отображает пользователю список подходящих вариантов для выбора и автоматически заполняет поле этими данными. Список вариантов появляется только после ввода первого символа или при изменении уже введённого значения.

Функциональность

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

Варианты

Обычное состояние

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

Ввод текста и выбор значения

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

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

Если введённое значение совпадает с одним из вариантов в списке, то при потере фокуса поле автоматически заполняется этим значением.

Предложение вариантов

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

Состояния

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

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

Ошибка

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

Взаимодействие

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

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