Добавление значений через ввод

Добавление пользовательских значений через ввод в Choices.js реализуется через механизм динамического создания элементов списка, который позволяет превращать введённый текст в полноценные элементы выбора (items). Такой подход используется в теговых интерфейсах, системах фильтрации, формах с произвольными значениями и сценариях, где фиксированный набор опций недостаточен.

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

Основные параметры:

  • addItems: true — разрешает добавление новых элементов
  • duplicateItems: false — запрещает дублирование значений
  • delimiter — символ(ы) разделения при вводе нескольких значений
  • editItems: true — позволяет редактировать уже добавленные элементы

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

Инициализация с поддержкой ввода новых значений

Типовая конфигурация, позволяющая добавлять элементы через ввод:

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

В таком режиме ввод текста и нажатие Enter приводит к созданию нового элемента списка. При вводе нескольких значений через разделитель они разбиваются и добавляются по отдельности.

Механизм преобразования ввода в элемент

При обработке пользовательского ввода библиотека выполняет несколько этапов:

  1. Получение строки из input-поля
  2. Проверка на совпадение с существующими options
  3. Применение фильтров (если заданы)
  4. Создание нового item при разрешённой опции addItems
  5. Добавление элемента в внутреннюю коллекцию состояния
  6. Рендер нового тега в UI

Ключевым является момент проверки на существование: если значение уже присутствует, поведение зависит от duplicateItems.

Обработка Enter и разделителей

Добавление через ввод чаще всего связано с клавишей Enter. Однако возможна обработка нескольких значений сразу через delimiter.

Пример:

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

Ввод:

javascript, html, css

Результат:

  • javascript
  • html
  • css

Каждое значение будет преобразовано в отдельный элемент.

Добавление значений программно

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

addItem

choices.setChoiceByValue('react');
choices.setValue(['react']);

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

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

addChoice (через API-инстанс)

Внутренние методы позволяют расширять список доступных опций:

choices._addChoice({
  value: 'angular',
  label: 'Angular',
  selected: false,
  disabled: false
});

Хотя метод с подчёркиванием считается внутренним, он часто используется при кастомных расширениях.

Фильтрация вводимых значений

Для контроля качества вводимых данных применяется addItemFilter. Это функция, которая позволяет перехватывать ввод перед созданием элемента.

Пример:

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

В этом случае значения короче 3 символов игнорируются.

Фильтр может использоваться для:

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

Нормализация введённых значений

Перед добавлением часто требуется преобразование текста:

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

Пример:

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

В данном сценарии фактически создаётся контролируемый pipeline обработки ввода.

Обработка вставки (paste)

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

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

Если пользователь вставляет строку:

node.js, express, mongodb

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

Управление дубликатами

Контроль повторяющихся значений критичен при вводе через текстовое поле.

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

Поведение:

  • при false повтор игнорируется
  • при true создаются дубликаты

Внутри система сравнивает value, а не label, что важно при различии отображаемого текста и реального значения.

Событие добавления элемента

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

document.querySelector('#tags').addEventListener(
  'addItem',
  function(event) {
    const item = event.detail;
  }
);

event.detail содержит:

  • value
  • label
  • id
  • группа (если используется группировка)

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

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

При включённом delimiter система автоматически делит строку на массив значений.

Алгоритм:

  1. Получить строку
  2. Разбить по delimiter
  3. Очистить пустые значения
  4. Применить фильтр
  5. Добавить каждый элемент отдельно

Пример конфигурации:

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

Особенности поведения при пустом вводе

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

addItemFilter: (value) => value.trim().length > 0

Взаимодействие с поиском внутри input

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

  • создаётся новый элемент
  • показывается сообщение об отсутствии совпадений
  • блокируется добавление

Это поведение регулируется сочетанием addItems и внутренней логикой поиска.

Ограничение структуры вводимых значений

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

  • только латиница
  • только числа
  • email-формат
  • slug-формат

Пример:

const choices = new Choices('#tags', {
  addItems: true,
  addItemFilter: (value) => {
    return /^[a-z0-9-]+$/.test(value);
  }
});

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

Управление поведением через комбинацию настроек

Комбинация ключевых параметров определяет модель добавления:

  • addItems — разрешение создания новых элементов
  • duplicateItems — контроль уникальности
  • delimiter — пакетный ввод
  • paste — вставка нескольких значений
  • addItemFilter — валидация

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

Оглавление