Создание мультиселекта

Мультиселект в Choices.js представляет собой расширенную форму стандартного HTML-элемента <select multiple>, дополненную поиском, управлением тегами, кастомизацией отображения и гибкой работой с данными. Библиотека преобразует обычный список опций в интерактивный компонент, позволяющий выбирать несколько значений, добавлять и удалять элементы, а также управлять выбранным состоянием через API.

Основой для инициализации мультиселекта служит стандартный HTML-элемент:

<select id="tags" multiple>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="py">Python</option>
  <option value="go">Go</option>
</select>

Ключевой атрибут здесь — multiple, который включает возможность выбора нескольких значений. Без него Choices.js будет работать в режиме одиночного выбора.

Инициализация библиотеки выполняется через конструктор:

const element = document.getElementById('tags');

const choices = new Choices(element, {
  removeItemButton: true,
  searchEnabled: true,
  placeholderValue: 'Выбор языков',
});

После выполнения этого кода стандартный select заменяется на кастомный компонент с поддержкой тегов и поиска.

Принцип работы мультиселекта

Choices.js преобразует выбранные элементы в отдельные визуальные блоки (теги). Каждый выбранный элемент:

  • отображается в виде отдельного блока;
  • может быть удалён по кнопке;
  • синхронизируется с исходным <select>;
  • сохраняется при отправке формы.

Внутренне библиотека поддерживает состояние выбранных элементов и автоматически обновляет DOM.

Добавление элементов через JavaScript

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

Добавление одного элемента

choices.setChoiceByValue('js');

Этот метод выбирает значение из существующих опций.

Добавление нескольких элементов

choices.setChoiceByValue(['js', 'py']);

При включённом мультиселекте библиотека автоматически создаёт несколько выбранных тегов.

Добавление новых опций динамически

choices.setChoices([
  { value: 'rust', label: 'Rust' },
  { value: 'csharp', label: 'C#' }
], 'value', 'label', true);

Последний параметр true указывает на замену текущих опций.

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

Choices.js предоставляет несколько способов удаления значений.

Удаление конкретного элемента

choices.removeActiveItemsByValue('js');

Метод удаляет элемент как из интерфейса, так и из состояния компонента.

Очистка всех выбранных значений

choices.removeActiveItems();

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

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

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

Разрешение удаления элементов

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

При включённой опции каждый выбранный элемент получает кнопку удаления.

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

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

При превышении лимита новые элементы не добавляются, что полезно для форм с ограничениями.

Запрет повторных значений

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

Эта настройка предотвращает дублирование выбранных значений.

Работа с поиском в мультиселекте

Поиск играет важную роль при большом количестве опций.

const choices = new Choices(element, {
  searchEnabled: true,
  searchPlaceholderValue: 'Поиск...'
});

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

Настройка чувствительности поиска

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

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

Управление отображением выбранных элементов

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

Управление внешним видом тегов

const choices = new Choices(element, {
  classNames: {
    item: 'custom-item',
    button: 'custom-button'
  }
});

Это позволяет интегрировать компонент в существующую дизайн-систему.

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

const choices = new Choices(element, {
  renderSelectedChoices: 'auto'
});

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

Предустановленные значения

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

Через HTML

<option value="js" selected>JavaScript</option>
<option value="py" selected>Python</option>

Через JavaScript

const choices = new Choices(element);

choices.setChoiceByValue(['js', 'py']);

Оба подхода синхронизируются и дают одинаковый результат.

События мультиселекта

Choices.js предоставляет набор событий для отслеживания изменений состояния.

Добавление элемента

element.addEventListener('addItem', function(event) {
  console.log(event.detail.value);
});

Удаление элемента

element.addEventListener('removeItem', function(event) {
  console.log(event.detail.value);
});

Изменение состояния списка

element.addEventListener('change', function(event) {
  console.log(event.target.value);
});

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

Группировка в мультиселекте

Choices.js поддерживает структурированные списки через optgroup.

<select id="langs" multiple>
  <optgroup label="Frontend">
    <option value="js">JavaScript</option>
    <option value="ts">TypeScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="go">Go</option>
    <option value="java">Java</option>
  </optgroup>
</select>

Группы сохраняются и отображаются в интерфейсе без дополнительных настроек.

Динамическое управление состоянием

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

Полная замена набора опций

choices.setChoices([
  { value: 'php', label: 'PHP' },
  { value: 'ruby', label: 'Ruby' }
], 'value', 'label', true);

Добавление новых элементов без удаления старых

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

Последний параметр определяет режим добавления.

Синхронизация с формами

Мультиселект автоматически интегрируется с HTML-формами. При отправке формы выбранные значения передаются как массив:

tags=js&tags=py&tags=go

Это стандартное поведение multiple select, сохранённое и расширенное библиотекой.

Ограничения и особенности поведения

Мультиселект Choices.js имеет ряд особенностей:

  • при большом количестве элементов возможна нагрузка на DOM;
  • поиск работает только по видимым данным;
  • синхронизация зависит от корректной структуры <select>;
  • программные изменения состояния должны выполняться через API, а не через прямое изменение DOM.

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

Оглавление