Отображение выбранных значений

В Choices.js выбранные значения представляются как структурированные элементы интерфейса, формируемые на основе внутренней модели данных компонента. Каждое выбранное значение превращается в объект item, содержащий минимум два ключевых поля: value и label. Именно label используется для отображения пользователю, а value — для хранения и передачи данных формы.

Отрисовка выбранных элементов происходит внутри отдельного контейнера, который отделён от списка доступных опций. В режиме множественного выбора каждый элемент превращается в визуальный «ток» (tag/chip), в режиме одиночного выбора — в единственное значение внутри поля ввода.

Отображение в одиночном режиме

При использовании single select интерфейс отображает только одно выбранное значение. Оно заменяет плейсхолдер и занимает основную область input-поля.

Ключевые особенности:

  • отображается только последний выбранный элемент;
  • предыдущее значение автоматически заменяется новым;
  • структура DOM остаётся упрощённой (без списка токенов);
  • плейсхолдер скрывается при наличии значения.

Поведение управляется внутренним состоянием, где массив выбранных элементов ограничен одним объектом.

Отображение в режиме множественного выбора

В режиме multiple каждый выбранный элемент отображается как отдельный блок внутри контейнера выбранных значений.

Типичный элемент включает:

  • текстовое представление (label);
  • кнопку удаления (если включено);
  • CSS-класс состояния (active/selected);
  • data-атрибут с value.

Пример логики представления:

  • пользователь выбирает опцию;
  • Choices.js создаёт item-объект;
  • item добавляется в массив selectedItems;
  • DOM обновляется, создавая новый tag-элемент.

Каждый такой элемент является независимой единицей интерфейса.

Визуальная модель «токенов»

Отображение выбранных значений строится на концепции токенов (chips). Каждый токен содержит:

  • контейнер элемента;
  • label;
  • кнопку удаления (при включённом removeItemButton);
  • состояние фокуса при навигации с клавиатуры.

Основной классический CSS-узел:

  • .choices__item
  • .choices__item--selectable
  • .choices__item--choice (для списка)
  • .choices__item--selected

Внутренне Choices.js различает элементы списка опций и элементы выбранных значений, несмотря на схожую структуру классов.

Управление отображением кнопки удаления

Ключевая настройка:

  • removeItemButton: true

При включении параметра каждый выбранный элемент получает кнопку удаления, которая:

  • удаляет item из внутреннего массива;
  • обновляет DOM без перерендера всего списка;
  • вызывает событие removeItem.

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

Ограничение количества отображаемых элементов

Для управления визуальной перегрузкой применяется параметр:

  • maxItemCount

При превышении лимита Choices.js заменяет отображение на информационный блок:

  • «Only X values can be added»

При этом логика хранения остаётся прежней, но UI блокирует дальнейшее добавление.

Дополнительно используется:

  • maxItemText

Он определяет текст сообщения при превышении лимита.

Сортировка отображаемых значений

Параметр:

  • shouldSort

Влияет на порядок отображения выбранных элементов:

  • true — элементы сортируются по алфавиту или заданному comparator;
  • false — сохраняется порядок выбора пользователем.

Сортировка влияет только на UI-порядок, не затрагивая порядок исходного массива данных.

Управление отображением через renderSelectedChoices

Ключевая настройка визуализации:

  • renderSelectedChoices

Возможные значения:

  • true — выбранные элементы отображаются как токены в input;
  • false — выбранные элементы не отображаются внутри input, но сохраняются в состоянии.

Используется в сценариях, где визуальное отображение должно быть скрыто (например, кастомный UI поверх Choices.js).

Кастомизация шаблонов отображения

Choices.js позволяет полностью переопределить визуальную структуру выбранных элементов через:

  • callbackOnCreateTemplates

Это функция, возвращающая набор шаблонов для:

  • item (выбранный элемент);
  • choice (элемент списка);
  • container.

Пример логики кастомизации:

  • изменение HTML структуры токена;
  • добавление иконок;
  • внедрение дополнительных data-атрибутов;
  • изменение порядка label и кнопки удаления.

Шаблон item отвечает напрямую за отображение выбранного значения в интерфейсе.

Отображение placeholder при пустом состоянии

Если выбранных значений нет, отображается placeholder:

  • управляется атрибутом placeholder
  • исчезает при первом выборе элемента

Поведение зависит от режима:

  • single select: placeholder заменяется значением;
  • multiple select: placeholder скрывается, но может быть визуально компенсирован пустым контейнером.

Обработка длинных значений

При отображении длинных label-значений применяется:

  • CSS обрезка текста (ellipsis);
  • перенос строк в зависимости от настроек контейнера;
  • ограничение ширины токена.

Choices.js не изменяет текст, а лишь управляет его визуальной обёрткой.

Доступность и ARIA в отображении значений

Каждый выбранный элемент получает:

  • aria-selected="true"
  • role="option" (в зависимости от режима)
  • поддержка навигации клавиатурой

Удаление элементов также сопровождается обновлением доступных ARIA-состояний, чтобы интерфейс оставался совместимым со screen reader.

Программное управление отображением

Изменение отображаемых значений возможно через API:

  • setValue() — установка выбранных значений;
  • removeItem(item) — удаление конкретного значения;
  • clearStore() — очистка всех выбранных элементов;
  • getValue() — получение текущего состояния.

При каждом изменении автоматически пересоздаётся DOM выбранных элементов.

Влияние состояния disabled на отображение

При установке disabled: true:

  • выбранные элементы остаются видимыми;
  • кнопки удаления становятся неактивными;
  • добавление новых значений блокируется;
  • визуально применяется класс disabled.

Это позволяет сохранять отображение без возможности изменения.

Пользовательские сценарии отображения

В реальных интерфейсах Choices.js часто используется для:

  • тегирования (tags input);
  • выбора категорий;
  • фильтров поиска;
  • выбора связанных сущностей.

В каждом сценарии отображение выбранных значений адаптируется через:

  • шаблоны item;
  • стили CSS;
  • ограничение количества элементов;
  • управление сортировкой и удалением.

Внутренняя модель синхронизации UI и состояния

Отображение выбранных значений основано на синхронной модели:

  • изменение массива selectedItems;
  • триггер обновления DOM;
  • перерасчёт контейнера выбранных элементов;
  • обновление скрытого input (для форм).

Таким образом UI всегда является отражением внутреннего состояния, а не независимой сущностью.

Оглавление