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

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

Внутренне Choices.js хранит данные о выбранных значениях отдельно от исходного списка опций. Это означает, что простое изменение DOM-элементов не приводит к корректному обновлению состояния компонента. Очистка должна выполняться через публичные методы API.

Полное сбрасывание состояния через clearStore

Метод clearStore() используется для полного сброса состояния экземпляра Choices. Он удаляет:

  • выбранные элементы;
  • список опций;
  • активные состояния поиска;
  • внутренние кэши.

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

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

// Добавление выбора
choices.setChoiceByValue('value1');

// Полная очистка
choices.clearStore();

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

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

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

removeActiveItems

Метод removeActiveItems() удаляет все выбранные значения без влияния на список доступных опций.

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

choices.setChoiceByValue(['a', 'b', 'c']);

// Удаление всех выбранных значений
choices.removeActiveItems();

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

Очистка с помощью setValue

Альтернативный подход заключается в установке пустого массива значений через setValue().

choices.setValue([]);

Этот метод работает как декларативное управление состоянием: компоненту явно задаётся новое состояние без выбранных элементов. Внутренне Choices.js синхронизирует UI и данные модели.

Особенности:

  • сохраняются опции;
  • сбрасываются выбранные элементы;
  • обновляется отображение тегов;
  • корректно триггерятся события изменения.

Использование removeItem для точечной очистки

Если требуется удалить отдельные элементы выбора, используется метод removeItem(). Он принимает объект или значение элемента.

choices.removeItem(choices.getValue(true)[0]);

В более стабильных сценариях используется удаление по значению:

choices.removeItemByValue('value1');

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

Очистка через setChoiceByValue

Метод setChoiceByValue() может использоваться не только для установки значений, но и для очистки.

choices.setChoiceByValue([]);

Такой способ фактически переопределяет текущий выбор пустым массивом. Поведение аналогично setValue([]), однако в некоторых версиях Choices.js различие заключается в том, как обрабатываются события и синхронизация UI.

Очистка поля поиска

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

choices.clearInput();

Этот метод:

  • очищает текст внутри input;
  • сбрасывает фильтрацию списка;
  • возвращает выпадающий список в исходное состояние.

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

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

Choices.js различает активные (selected) и выделенные (highlighted) элементы. При работе с клавиатурой пользователь может выделить элемент без его окончательного выбора.

Для очистки такого состояния применяется:

choices.removeHighlightedItems();

Этот метод полезен при обработке событий клавиатуры, особенно при кастомной логике навигации по списку.

Комбинированная очистка состояния

В сложных интерфейсах требуется одновременно очистить:

  • выбранные значения;
  • поле поиска;
  • выделенные элементы.

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

choices.removeActiveItems();
choices.removeHighlightedItems();
choices.clearInput();

Такая комбинация оставляет компонент в состоянии, максимально близком к «чистому», без удаления опций.

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

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

async function reloadChoices() {
  choices.removeActiveItems();
  choices.clearInput();

  const data = await fetch('/api/options').then(r => r.json());

  choices.setChoices(data, 'value', 'label', true);
}

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

Очистка при single select и multiple select

Поведение методов очистки не зависит от режима, однако различается результат:

single select

  • всегда один выбранный элемент;
  • removeActiveItems() или setValue([]) возвращает пустое состояние;
  • интерфейс мгновенно возвращается к placeholder.
choices.removeActiveItems();

multiple select

  • возможны множественные значения;
  • очистка затрагивает массив выбранных элементов;
  • визуально удаляются все теги.
choices.setValue([]);

События при очистке

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

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

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

const element = document.querySelector('#select');

element.addEventListener('change', (e) => {
  console.log('Текущее значение:', e.detail.value);
});

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

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

В крайних случаях применяется полное уничтожение экземпляра с последующей инициализацией:

choices.destroy();

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

Этот подход используется при:

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

Недостатком является потеря всех текущих настроек и необходимость повторной конфигурации.

Типичные ошибки при очистке состояния

Неправильная очистка часто связана с попыткой прямого изменения DOM:

document.querySelector('.choices__item').remove();

Такой подход нарушает синхронизацию между UI и внутренним состоянием библиотеки. В результате:

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

Корректная очистка всегда выполняется через API Choices.js.

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

При использовании Choices.js внутри форм очистка должна учитывать состояние родительского <form>.

form.addEventListener('reset', () => {
  choices.removeActiveItems();
  choices.clearInput();
});

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

Поведение placeholder после очистки

После удаления всех значений компонент возвращает placeholder в исходное состояние. Это зависит от конфигурации:

  • placeholderValue — текст подсказки;
  • searchEnabled — влияет на видимость input;
  • removeItemButton — влияет на UX удаления.

При корректной очистке placeholder становится единственным видимым состоянием поля выбора.

Оглавление