В основе Choices.js лежит модель состояния, разделённая на несколько логических слоёв: список доступных опций, выбранные значения, активные (highlighted) элементы, а также внутреннее представление пользовательского ввода. Эта структура позволяет библиотеке поддерживать как одиночный, так и множественный выбор, обеспечивать поиск, фильтрацию и динамическое изменение данных без прямого вмешательства в DOM.
Состояние не хранится исключительно в DOM-структуре. Вместо этого используется внутренний store, синхронизируемый с визуальным представлением. Это делает возможным программное управление компонентом через API-методы без необходимости ручного обновления интерфейса.
При создании экземпляра Choices формируется несколько
ключевых коллекций:
Каждый элемент в этих коллекциях представляет собой объект с унифицированной структурой:
value — значениеlabel — отображаемый текстselected — состояние выбораdisabled — блокировка элементаЭта модель позволяет унифицировать операции независимо от источника данных: HTML-разметка, массив объектов или асинхронная подгрузка.
Метод getValue() возвращает текущее состояние выбранных
элементов.
true возвращается только массив значений
(value)Особенность реализации заключается в том, что метод читает данные из внутреннего store, а не из DOM, что исключает рассинхронизацию состояния при сложных операциях.
При использовании булевого параметра происходит трансформация структуры:
valueЭто полезно при интеграции с API, где требуется только идентификатор выбора без метаданных.
Метод используется для программного выбора элементов по их значению.
Алгоритм работы:
choicesitemsОсобенность заключается в том, что метод не добавляет новые опции — он работает только с уже существующими значениями.
addItem() является одним из ключевых методов управления
состоянием.
Он выполняет:
choicesСигнатура метода обычно включает:
valuelabel (опционально)При включённой опции addItems библиотека может
автоматически расширять список доступных значений.
Метод отвечает за удаление выбранного элемента.
Процесс включает:
itemsУдаление происходит по значению, что обеспечивает предсказуемость поведения даже при одинаковых label.
Метод setChoices() используется для полной или частичной
замены списка доступных элементов.
Режимы работы:
Каждый элемент массива должен соответствовать структуре:
valuelabelselecteddisabledПри выполнении метода происходит:
Метод активно используется при работе с динамическими источниками данных, например API или зависимыми селектами.
Метод очищает все внутренние коллекции:
choicesitemshighlightedПосле выполнения состояние компонента возвращается к пустому виду. DOM также синхронизируется и очищается.
Использование метода характерно для сценариев полной переинициализации компонента без уничтожения экземпляра.
Метод отвечает за очистку пользовательского ввода в поле поиска.
Действия:
choicesСостояние выбора при этом не затрагивается, изменяется только поисковый слой.
Метод reset() возвращает компонент к начальному
состоянию.
Выполняется:
Начальные данные берутся из конфигурации экземпляра или из исходной разметки.
Метод переводит компонент в неактивное состояние.
Поведение:
Состояние store остаётся неизменным, что позволяет восстановить работу без потери данных.
Обратная операция к disable().
Выполняется:
Метод не изменяет данные, а только управляет интерактивностью.
Choices.js тесно связывает управление состоянием с системой событий. Любое изменение store приводит к генерации событий:
Событийная модель обеспечивает реактивность без необходимости ручного контроля DOM.
Состояние всегда рассматривается как единый источник истины. DOM выступает лишь визуальным слоем, отражающим внутренние структуры данных.
В реальных сценариях методы состояния часто комбинируются:
choicesТакая композиция позволяет строить предсказуемые сценарии поведения интерфейса при динамических изменениях данных, не нарушая целостность внутреннего store.