Обновление опций

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

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

choices.setChoices(
  [
    { value: 'js', label: 'JavaScript' },
    { value: 'ts', label: 'TypeScript' }
  ],
  'value',
  'label',
  true
);

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

  • true — полный сброс текущих опций перед добавлением новых
  • false — добавление к существующему списку без удаления старых элементов

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

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

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

choices.setChoices(
  [
    { value: 'react', label: 'React' }
  ],
  'value',
  'label',
  false
);

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

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

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

choices.clearChoices();

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

Полный сброс состояния

Если требуется очистить не только список, но и внутреннее состояние выбора, применяется clearStore.

choices.clearStore();

Данный метод выполняет более глубокую очистку:

  • удаляет все опции
  • сбрасывает выбранные элементы
  • очищает фильтры поиска
  • пересоздаёт внутренние структуры данных

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

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

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

Установка значений программно

choices.setValue(['js', 'ts']);

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

Также возможен вариант установки объектов:

choices.setValue([
  { value: 'js', label: 'JavaScript' }
]);

В этом случае создаются новые элементы, если они отсутствуют.

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

choices.setChoiceByValue('react');

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

Добавление и удаление отдельных элементов

Хотя основной акцент Choices.js смещён на работу с массивами, возможны точечные операции.

Добавление:

choices.setChoices(
  [{ value: 'vue', label: 'Vue' }],
  'value',
  'label',
  false
);

Удаление чаще реализуется через пересборку списка, однако в некоторых версиях доступен доступ к внутреннему store:

choices.removeActiveItems();

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

Синхронизация с внешними данными

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

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

  1. Очистка или частичное обновление списка
  2. Запрос к серверу
  3. Передача полученных данных в setChoices
fetch('/api/languages')
  .then(res => res.json())
  .then(data => {
    choices.setChoices(data, 'id', 'name', true);
  });

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

Поведение при обновлении и фильтрации

После обновления списка Choices.js автоматически пересобирает:

  • индекс поиска
  • фильтр отображения
  • виртуализированный список (если включён)

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

Работа с дубликатами при обновлении

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

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

Контроль осуществляется через параметры конфигурации экземпляра и структуру входных данных.

Частичные обновления и оптимизация

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

  • добавление только новых элементов
  • минимизацию вызовов setChoices
  • использование батчинга обновлений

Пример пакетной загрузки:

const batch = [
  { value: 'go', label: 'Go' },
  { value: 'rust', label: 'Rust' }
];

choices.setChoices(batch, 'value', 'label', false);

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

Обновление при изменении внешнего состояния

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

При изменении внешнего состояния важно соблюдать последовательность:

  • сначала обновление списка
  • затем синхронизация выбранных значений
  • затем корректировка фильтров

Нарушение порядка может приводить к рассинхронизации UI и внутреннего store.

Управление жизненным циклом обновлений

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

  • росту памяти
  • дублированию логики фильтрации
  • замедлению поиска

Для предотвращения подобных эффектов используется явная очистка состояния перед загрузкой новых данных или ограничение частоты обновлений через debounce-механизмы.

Оглавление