Параметры выбора элементов

Выбор элементов в Choices.js определяется совокупностью параметров, управляющих тем, как данные отображаются, как пользователь взаимодействует с пунктами списка и какие ограничения накладываются на процесс выбора. Внутренняя модель библиотеки строится вокруг унифицированного представления элемента, содержащего минимум три ключевых свойства: значение, отображаемый текст и состояние (выбран/не выбран/заблокирован).

Каждый элемент списка в Choices.js описывается объектом с фиксированной структурой:

  • value — уникальный идентификатор элемента
  • label — отображаемый текст
  • selected — состояние выбора
  • disabled — недоступность для выбора

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

Режим одиночного и множественного выбора

Поведение выбора определяется типом исходного HTML-элемента (select-one или select-multiple) и конфигурацией экземпляра.

В режиме одиночного выбора библиотека обеспечивает:

  • автоматическое снятие предыдущего выбранного значения при выборе нового
  • отсутствие накопления значений
  • немедленное закрытие списка после выбора (при стандартной конфигурации)

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

  • поддерживается накопление выбранных элементов
  • возможна настройка ограничения количества выбранных значений
  • реализуется управление удалением и добавлением элементов

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

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

Контроль объема выбора осуществляется через параметры:

maxItemCount

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

  • новые элементы становятся недоступными для выбора
  • интерфейс может отображать информационное сообщение

maxItemText

Формирует текст уведомления при попытке превышения лимита. Поддерживает шаблонные переменные, позволяя динамически отображать текущее состояние выбора.

maxItemCountText

Расширяет поведение предыдущего параметра, предоставляя более гибкую настройку отображаемого сообщения при превышении лимита.

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

Управление удалением выбранных элементов

Удаление элементов является ключевой частью механики выбора в множественном режиме.

removeItemButton

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

removeItems

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

Поведение удаления

При удалении элемента:

  • он возвращается в список доступных опций
  • состояние выбора обновляется синхронно
  • пересчитываются ограничения (maxItemCount)

Закрытие списка и поведение интерфейса после выбора

closeDropdownOnSelect

Контролирует, будет ли список закрываться после выбора элемента.

  • при true — список закрывается после каждого выбора
  • при false — список остается открытым, позволяя выполнять множественный выбор без дополнительных действий

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

Сортировка элементов при выборе

shouldSort

Определяет, будет ли Choices.js сортировать элементы:

  • в списке доступных опций
  • в выбранных элементах

Сортировка влияет на восприятие логики выбора. При отключении сохраняется исходный порядок массива choices, что критично при работе с заранее структурированными наборами данных.

sorter

Позволяет переопределить алгоритм сортировки. Используется для:

  • кастомного порядка (например, по приоритету)
  • локализованной сортировки
  • сортировки по дополнительным полям объекта

Поиск и его влияние на выбор

Хотя поиск не является прямым механизмом выбора, он определяет доступность элементов для взаимодействия.

searchEnabled

Включает или отключает поиск внутри списка. При отключении выбор осуществляется только через прокрутку и визуальное сканирование.

searchChoices

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

searchFloor

Задает минимальное количество символов для активации поиска. Влияет на момент появления фильтрации.

searchResultLimit

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

fuseOptions

Позволяет управлять алгоритмом нечеткого поиска (через Fuse.js внутри Choices.js). Влияет на релевантность результатов и поведение сопоставления строк.

Добавление новых элементов и расширение выбора

addItems

Разрешает добавление новых значений, не входящих в исходный список. Это превращает стандартный select в комбинированное поле выбора и ввода.

addItemFilter

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

  • ограничения формата ввода
  • запрета дубликатов
  • валидации по регулярным выражениям

duplicateItemsAllowed

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

Работа с идентификаторами и значениями

Выбор в Choices.js зависит от корректного сопоставления value и label.

  • value используется как ключ хранения
  • label отображается пользователю
  • внутренние операции выбора всегда работают с value

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

Поведение при взаимодействии с элементами

itemSelectText

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

delimiter

Используется для сериализации выбранных значений в строку. Влияет на представление результата выбора при интеграции с формами.

editItems

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

Ограничение доступности элементов

Выбор также регулируется состоянием disabled у элементов.

  • disabled: true полностью исключает элемент из выбора
  • такие элементы не участвуют в поиске и не реагируют на взаимодействие

Это состояние может динамически изменяться через API Choices.js, что позволяет управлять доступностью элементов в реальном времени.

Влияние UI-состояний на выбор

Некоторые параметры не управляют выбором напрямую, но влияют на его восприятие и логику:

  • placeholder и placeholderValue формируют начальное состояние до выбора
  • loadingText отображается при асинхронной загрузке опций, временно блокируя выбор
  • classNames позволяет изменять визуальное представление выбранных элементов, что важно при сложных интерфейсах

Поведение выбора при асинхронных данных

При динамической загрузке элементов через API выбор может временно блокироваться до завершения загрузки. В этом состоянии:

  • список может быть пустым
  • элементы становятся недоступны для выбора
  • интерфейс переходит в состояние ожидания

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

Взаимодействие параметров выбора между собой

Параметры выбора в Choices.js не работают изолированно. Их взаимодействие формирует итоговое поведение:

  • maxItemCount ограничивает addItems
  • searchEnabled влияет на доступность элементов для выбора
  • removeItemButton изменяет модель удаления, влияя на общее состояние выбранных значений
  • shouldSort может конфликтовать с предустановленным порядком данных
  • duplicateItemsAllowed определяет стратегию добавления новых значений

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

Оглавление