Очистка всего выбора

Очистка выбранных значений в Choices.js реализуется несколькими способами, каждый из которых затрагивает разные уровни состояния компонента: выбранные элементы, отображаемые теги, внутренний стор и состояние поиска. В зависимости от режима работы (single select или multi select), поведения плагина и источника данных (локальные или удалённые опции) применяется различная стратегия сброса.

Наиболее прямой способ очистки текущего выбора — использование метода удаления активных элементов. В Choices.js за выбранные значения отвечает коллекция active items, и её можно полностью очистить:

const choices = new Choices('#example', {
  removeItemButton: true,
  shouldSort: false,
});

Очистка выбора:

choices.removeActiveItems();

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

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

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

Альтернативный способ очистки основывается на явной установке пустого массива значений. Choices.js синхронизирует внутреннее состояние при изменении через программный интерфейс:

choices.setValue([]);

В случае одиночного выбора допустимо использование null:

choices.setValue(null);

Этот способ особенно полезен, когда состояние компонента управляется извне (например, через React, Vue или собственный state manager), так как позволяет унифицировать логику обновления значений.

Очистка через метод clearStore

Метод clearStore() используется для более радикального сброса состояния компонента. Он очищает внутреннее хранилище, включая выбранные элементы, список опций и данные поиска:

choices.clearStore();

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

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

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

Очистка выбранных значений без затрагивания опций

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

choices.removeActiveItems();

или комбинированная очистка входного состояния:

choices.input.clear();
choices.removeActiveItems();

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

Сброс состояния поиска и выбора одновременно

Choices.js хранит отдельно состояние выбранных значений и состояние поискового ввода. При очистке выбора поле поиска может оставаться заполненным, особенно в searchable режимах.

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

choices.removeActiveItems();
choices.input.clear();

Если используется кастомная фильтрация или async loading, дополнительно может потребоваться сброс результатов поиска:

choices.clearChoices();
choices.removeActiveItems();
choices.input.clear();

Очистка в динамическом режиме (remote data)

При использовании динамической загрузки данных (AJAX / async list), очистка часто требует обновления как выбранных элементов, так и списка опций:

choices.setChoices([], 'value', 'label', true);
choices.removeActiveItems();

Четвёртый параметр true полностью заменяет текущие опции новым набором, что фактически очищает список.

Поведение событий при очистке

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

  • removeItem — при удалении каждого элемента
  • change — при изменении значения
  • clear (в зависимости от версии и реализации) — при полном сбросе

Пример обработки:

choices.passedElement.element.addEventListener('change', (event) => {
  console.log(event.detail.value);
});

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

Очистка через повторную инициализацию

В некоторых архитектурах применяется полный пересоздание экземпляра:

choices.destroy();

const newChoices = new Choices('#example', {
  removeItemButton: true,
});

Такой подход гарантирует полный сброс состояния, включая DOM-структуру, обработчики событий и внутренние кэши. Он используется при сложных сценариях обновления интерфейса, когда точечная очистка недостаточна.

Особенности поведения в single select

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

  • визуально отображается placeholder
  • внутреннее значение становится пустым
  • опция “placeholder” может повторно отображаться как выбранная

Пример:

choices.setValue(null);

или

choices.removeActiveItems();

Оба варианта приводят к эквивалентному состоянию, однако setValue(null) более явно выражает семантику отсутствия значения.

Очистка при disabled состоянии

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

choices.enable();
choices.removeActiveItems();

или

choices.setValue([]);
choices.disable();

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

Очистка с сохранением плейсхолдера

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

const choices = new Choices('#example', {
  placeholder: true,
  placeholderValue: 'Выберите значение',
});

После вызова очистки:

choices.removeActiveItems();

компонент возвращается к отображению placeholder без дополнительной логики.

Очистка в связке с внешним состоянием

При интеграции с внешними состояниями (Redux, MobX, Vuex, React state) очистка Choices.js обычно синхронизируется с обновлением внешнего значения:

choices.removeActiveItems();
externalState.value = [];

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

Оглавление