Очистка всех опций

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

Разделение типов данных внутри экземпляра

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

  • choices — полный список доступных вариантов, отображаемых в выпадающем списке
  • items — выбранные пользователем значения
  • store — внутреннее состояние, объединяющее данные и метаинформацию
  • highlighted choices — временное состояние интерфейса при навигации

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

Очистка списка доступных опций

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

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

// удаление всех доступных опций
choices.clearChoices();

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

Полный сброс выбранных значений

Для очистки выбранных элементов используется метод removeAllItems(). Он удаляет все активные значения из поля выбора.

choices.removeAllItems();

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

Одновременная очистка выбора и опций

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

choices.clearChoices();
choices.removeAllItems();

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

Работа с внутренним store и полное обнуление состояния

Choices.js не предоставляет прямого универсального метода «reset everything», но состояние можно приблизить к начальному несколькими способами.

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

Метод setChoices([]) позволяет полностью заменить набор данных пустым массивом:

choices.setChoices([]);

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

Пересоздание экземпляра

Наиболее радикальный способ очистки состояния — уничтожение текущего экземпляра и создание нового:

choices.destroy();

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

Метод destroy() удаляет все привязки, события и внутренние структуры, возвращая исходный DOM-элемент в первоначальное состояние.

Очистка поля ввода и визуального состояния

При использовании поискового ввода внутри Choices.js может потребоваться дополнительная очистка текстового поля и UI-состояния.

choices.clearInput();

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

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

В сценариях, где данные поступают из API, очистка часто выполняется перед новой загрузкой:

async function reloadOptions() {
  choices.clearChoices();
  choices.removeAllItems();

  const response = await fetch('/api/options');
  const data = await response.json();

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

Четвёртый параметр true в setChoices указывает на необходимость полной замены существующих данных.

Влияние параметра removeItemButton и состояния UI

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

Однако при сложных кастомизациях шаблонов (callbackOnCreateTemplates) может потребоваться дополнительная проверка DOM-состояния, так как кастомные элементы могут не полностью удаляться стандартными методами.

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

В режиме multiple: true поведение очистки особенно заметно, поскольку:

  • removeAllItems() удаляет все выбранные теги
  • clearChoices() очищает список доступных вариантов
  • повторная инициализация setChoices формирует новый набор
const choices = new Choices('#select', {
  removeItemButton: true,
  maxItemCount: -1
});

choices.setValue(['a', 'b', 'c']);
choices.removeAllItems();
choices.clearChoices();

Очистка при отключённом поиске

Если поиск отключён (searchEnabled: false), очистка становится более предсказуемой, поскольку отсутствует временное состояние фильтрации. В этом режиме clearChoices() напрямую влияет на отображаемый список без промежуточных фильтров.

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

Очистка может вызывать цепочку событий, которые важно учитывать при интеграции:

  • removeItem — при удалении выбранных значений
  • change — при изменении состояния поля
  • hideDropdown — при закрытии списка после очистки

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

choices.passedElement.element.addEventListener('change', () => {
  console.log('Состояние изменено');
});

Частичная очистка через фильтрацию данных

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

const filtered = data.filter(item => item.value !== 'deprecated');

choices.clearChoices();
choices.setChoices(filtered, 'value', 'label', true);

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

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

state.options = [];

choices.clearChoices();
choices.removeAllItems();

Такой подход снижает вероятность рассинхронизации UI и модели данных.

Особенности очистки при асинхронной загрузке

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

let requestId = 0;

async function load() {
  const id = ++requestId;

  choices.clearChoices();

  const res = await fetch('/api/options');
  const data = await res.json();

  if (id === requestId) {
    choices.setChoices(data, 'value', 'label', true);
  }
}

Итоговое поведение методов очистки

Комбинация методов формирует полный контроль над состоянием:

  • clearChoices() — очистка доступных опций
  • removeAllItems() — очистка выбранных значений
  • setChoices([]) — замена списка пустым набором
  • destroy() — полное уничтожение экземпляра
  • clearInput() — сброс текста поиска

Совместное использование этих механизмов позволяет точно управлять жизненным циклом данных внутри Choices.js без необходимости ручного вмешательства в DOM.

Оглавление