Работа с группами опций

Библиотека Choices.js предоставляет механизм группировки элементов списка через структуру optgroup, позволяя логически объединять связанные значения внутри одного селектора. Это особенно важно при работе с большими наборами данных, где требуется не только перечисление вариантов, но и их семантическое разделение.

Группа опций представляет собой контейнер, содержащий набор элементов option, объединённых общим заголовком. В DOM это соответствует стандартному HTML-элементу <optgroup>, который Choices.js расширяет дополнительной функциональностью, включая управление состоянием, кастомное отображение и динамическое обновление.

Базовая структура групп

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

const data = [
  {
    label: 'Фронтенд',
    id: 1,
    disabled: false,
    choices: [
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' },
      { value: 'angular', label: 'Angular' }
    ]
  },
  {
    label: 'Бэкенд',
    id: 2,
    choices: [
      { value: 'node', label: 'Node.js' },
      { value: 'django', label: 'Django' },
      { value: 'spring', label: 'Spring' }
    ]
  }
];

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

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

const choices = new Choices(element, {
  choices: data
});

Внутренняя модель группировки

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

  • группа имеет уникальный идентификатор (id);
  • каждая группа содержит массив дочерних элементов;
  • элементы внутри группы наследуют контекст группы, но сохраняют собственные значения;
  • состояние (выбрано/не выбрано/заблокировано) отслеживается на уровне отдельных элементов.

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

Отображение групп в интерфейсе

В визуальном представлении каждая группа отображается как блок с заголовком и списком элементов. Заголовок группы рендерится отдельно от опций и может быть стилизован через CSS-классы библиотеки.

Основные элементы DOM:

  • контейнер группы;
  • заголовок группы;
  • список опций внутри группы.

Пример структуры DOM:

<div class="choices__group">
  <div class="choices__heading">Фронтенд</div>
  <div class="choices__list">
    <div class="choices__item">React</div>
    <div class="choices__item">Vue</div>
  </div>
</div>

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

Добавление групп через API

Группы можно добавлять динамически с помощью метода setChoices. При этом структура должна соответствовать ожидаемому формату вложенности:

choices.setChoices([
  {
    label: 'Базы данных',
    choices: [
      { value: 'mysql', label: 'MySQL' },
      { value: 'postgres', label: 'PostgreSQL' },
      { value: 'mongo', label: 'MongoDB' }
    ]
  }
], 'value', 'label', false);

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

Управление состоянием групп

Хотя группы сами по себе не являются выбираемыми элементами, их состояние влияет на поведение вложенных опций. Основные сценарии:

Отключение группы

Отключение группы приводит к блокировке всех дочерних элементов:

choices.setChoices([
  {
    label: 'Устаревшие технологии',
    disabled: true,
    choices: [
      { value: 'ie6', label: 'Internet Explorer 6' }
    ]
  }
]);

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

Частичная активность

Choices.js не поддерживает частичное отключение группы как логической сущности — состояние всегда распространяется на отдельные элементы. Это означает, что гибкое управление достигается через ручную настройку каждого choice.

Фильтрация внутри групп

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

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

Это обеспечивает сохранение контекста даже при большом количестве данных.

Динамическое обновление групп

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

choices.setChoices([
  {
    label: 'Языки программирования',
    choices: [
      { value: 'js', label: 'JavaScript' },
      { value: 'ts', label: 'TypeScript' }
    ]
  }
], 'value', 'label', true);

При этом старая структура удаляется, и создаётся новая иерархия.

Особенности работы с вложенными данными

Группы в Choices.js не поддерживают рекурсивную вложенность. Это означает:

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

Такая модель упрощает рендеринг и повышает производительность при работе с большими наборами данных.

Сортировка внутри групп

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

const choices = new Choices(element, {
  shouldSort: true,
  choices: data
});

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

Кастомизация отображения групп

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

  • .choices__group — контейнер группы;
  • .choices__heading — заголовок группы;
  • .choices__list — список элементов внутри группы.

Пример изменения стиля заголовка:

.choices__heading {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

Использование групп в асинхронных источниках

При загрузке данных через API группы формируются на стороне клиента после получения ответа. Типичная структура ответа может содержать уже сгруппированные данные:

fetch('/api/options')
  .then(res => res.json())
  .then(data => {
    choices.setChoices(data, 'value', 'label', true);
  });

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

Поведение при множественном выборе

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

Состояние групп при этом не хранит информацию о выбранных элементах — ответственность за состояние полностью лежит на дочерних опциях.

Ограничения групповой модели

Группы в Choices.js обладают рядом архитектурных ограничений:

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

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

Оглавление