Мультиселект с тегами

Мультиселект с тегами в Choices.js представляет собой расширенный режим работы компонента, при котором пользователь может не только выбирать несколько значений из списка, но и создавать собственные пользовательские элементы, которые динамически превращаются в теги. Такой подход особенно полезен в формах, где набор значений заранее не фиксирован: ввод навыков, ключевых слов, email-адресов, категорий, фильтров и любых произвольных сущностей.

В стандартном режиме мультиселект позволяет выбирать несколько значений из заранее определённого списка <option>. При включении режима тегов появляется дополнительная возможность — ввод новых значений вручную. Каждое введённое значение преобразуется в отдельный тег внутри поля выбора.

Ключевая особенность заключается в том, что Choices.js объединяет два источника данных:

  • предопределённые опции из HTML или массива
  • пользовательский ввод, который превращается в новые элементы

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

Включение мультиселекта и режима тегов

Для работы в режиме мультиселекта необходимо указать атрибут multiple в элементе <select>. После этого Choices.js может быть инициализирован с дополнительной конфигурацией.

<select id="tags" multiple></select>

Инициализация:

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

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

Добавление пользовательских значений

Основной механизм тегирования включается через опцию addItems и поведение, связанное с вводом новых значений.

const choices = new Choices('#tags', {
  removeItemButton: true,
  duplicateItemsAllowed: false,
  addItems: true,
  paste: true
});

В этом режиме пользователь может вводить текст в поле поиска, и при нажатии клавиши подтверждения (например, Enter) создаётся новый элемент.

Настройка триггеров создания тегов

Создание нового тега обычно привязывается к клавишам разделения. Наиболее распространённые:

  • Enter
  • Запятая
  • Tab

Choices.js позволяет управлять этим поведением через конфигурацию:

const choices = new Choices('#tags', {
  delimiter: ',',
  editItems: true,
  addItems: true,
  addItemFilter: null
});

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

Фильтрация пользовательского ввода

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

const choices = new Choices('#tags', {
  addItems: true,
  addItemFilter: (value) => {
    return value.length > 2;
  }
});

Фильтр позволяет ограничить:

  • минимальную длину тега
  • допустимые символы
  • формат (например, email или числовые значения)
  • запрет пустых строк

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

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

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

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

Программное добавление тегов

Теги можно добавлять не только через интерфейс, но и через API библиотеки.

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

Для добавления новых значений используется метод setValue, который принимает массив объектов.

Также возможно динамическое добавление:

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

Ограничение количества тегов

В реальных интерфейсах часто требуется ограничить число выбранных или созданных тегов. Это реализуется через maxItemCount.

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

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

Запрет дубликатов

Теги часто должны быть уникальными. Для этого используется параметр duplicateItemsAllowed.

const choices = new Choices('#tags', {
  duplicateItemsAllowed: false
});

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

Работа с пробелами и форматированием

При создании тегов важную роль играет нормализация строки ввода. Часто необходимо:

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

Choices.js позволяет реализовать такую обработку через addItemFilter:

const choices = new Choices('#tags', {
  addItems: true,
  addItemFilter: (value) => {
    const normalized = value.trim().toLowerCase();
    return normalized.length > 0;
  }
});

Вставка нескольких тегов из строки

Часто пользователь вставляет строку сразу с несколькими значениями. Для этого используется delimiter.

const choices = new Choices('#tags', {
  delimiter: ',',
  addItems: true
});

Ввод:

javascript, typescript, react

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

Асинхронная подгрузка и теги

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

const choices = new Choices('#tags', {
  searchEnabled: true,
  shouldSort: false
});

При этом пользователь может:

  • выбрать существующее значение из API
  • создать новое значение, если его нет в списке

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

Программное управление жизненным циклом тегов

Choices.js предоставляет API для полного управления состоянием:

Удаление:

choices.removeActiveItems();

Очистка:

choices.clearStore();

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

Особенности UX мультиселекта с тегами

При проектировании интерфейсов важно учитывать поведение компонента:

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

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

Практическое применение

Мультиселект с тегами используется в следующих сценариях:

  • системы управления контентом (ключевые слова, метки)
  • формы регистрации (навыки, интересы)
  • фильтры поиска (динамические критерии)
  • email-инпуты и списки получателей
  • классификация данных в аналитических системах

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

Оглавление