Инициализация текстового input

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

Подготовка элемента ввода

Работа начинается с обычного текстового поля:

<input type="text" id="tags-input" placeholder="Введите значения">

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

Ключевой момент заключается в том, что библиотека не требует изменения HTML-разметки. Всё поведение определяется JavaScript-конфигурацией.

Базовая инициализация текстового input

Основной способ создания экземпляра Choices:

import Choices from 'choices.js';

const input = document.getElementById('tags-input');

const choices = new Choices(input);

После выполнения этого кода поле перестаёт работать как обычный input и начинает обрабатывать ввод как набор отдельных значений.

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

Режим работы с вводом значений

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

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

delimiter

Определяет символ, разделяющий значения при вставке строки:

  • "," — стандартное разделение через запятую
  • ";" — альтернативный формат
  • null — отключение автоматического разделения

editItems

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

removeItemButton

Добавляет кнопку удаления рядом с каждым элементом, что критично для UX при работе с множественными значениями.

Конфигурация поведения ввода

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

const choices = new Choices(input, {
  addItems: true,
  duplicateItems: false,
  maxItemCount: 10,
  addItemFilter: (value) => value.trim().length > 2
});

addItems

Определяет, разрешено ли добавление новых значений. В контексте input это основной переключатель между режимом “просто ввод” и “структурированный ввод”.

duplicateItems

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

maxItemCount

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

addItemFilter

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

addItemFilter: (value) => /^[a-zA-Z0-9]+$/.test(value)

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

Автоповедение при вводе

Choices.js изменяет стандартный цикл обработки input:

  1. Пользователь вводит текст
  2. Срабатывает обработка клавиши (Enter, Tab или delimiter)
  3. Значение проходит фильтры
  4. При успехе создаётся новый элемент
  5. Input очищается или остаётся активным для следующего ввода

Дополнительная настройка:

const choices = new Choices(input, {
  paste: true,
  duplicateItemsAllowed: false,
  resetScrollPosition: true
});

paste

Определяет поведение при вставке текста. При true библиотека пытается разбить вставленный текст на несколько элементов.

resetScrollPosition

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

Управление состоянием input через API

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

choices.setValue(['JavaScript', 'TypeScript']);

Добавление одного значения:

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

Очистка всех значений:

choices.clearStore();

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

choices.removeActiveItems();

События при работе с текстовым input

Choices.js генерирует события, позволяющие отслеживать изменения состояния:

input.addEventListener('addItem', (event) => {
  console.log(event.detail.value);
});

Основные события:

addItem

Срабатывает при добавлении нового значения.

removeItem

Вызывается при удалении элемента.

change

Фиксирует любое изменение состояния поля.

highlightItem

Используется при навигации по списку через клавиатуру.

Работа с вводом через клавиатуру

Клавиатурное управление является встроенной частью логики:

  • Enter — добавление элемента
  • Backspace — удаление последнего элемента
  • Arrow Up/Down — навигация
  • Escape — закрытие активных списков

Поведение можно частично модифицировать через конфигурацию:

const choices = new Choices(input, {
  removeItems: true,
  removeItemButton: true,
  searchEnabled: false
});

Интеграция с валидацией формы

Choices.js не заменяет HTML-валидацию, но работает совместно с ней. Значения сохраняются внутри input как строка, разделённая delimiter:

<input type="text" id="tags-input" name="tags">

После заполнения:

JavaScript,TypeScript,React

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

Динамическое обновление значений

Choices.js поддерживает обновление input в реальном времени:

choices.setValue(['Node.js', 'Express']);
choices.clearChoices();

Также возможно программное добавление элементов по мере выполнения логики приложения:

fetch('/api/tags')
  .then(res => res.json())
  .then(tags => {
    choices.setValue(tags);
  });

Особенности поведения при повторной инициализации

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

choices.destroy();

Это возвращает input к исходному состоянию DOM-элемента.

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

Choices.js перехватывает события:

  • input
  • keydown
  • paste

и преобразует их в внутренние действия модели данных. Это позволяет унифицировать поведение независимо от браузера.

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

Влияние настроек на UX текстового input

Комбинация параметров определяет характер взаимодействия:

  • включённый searchEnabled превращает input в гибрид поиска и ввода
  • shouldSort влияет на порядок отображения значений
  • renderChoiceLimit ограничивает количество отображаемых элементов в списке

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

const choices = new Choices(input, {
  addItems: true,
  duplicateItems: false,
  delimiter: ',',
  maxItemCount: 5,
  removeItemButton: true,
  editItems: true,
  paste: true,
  searchEnabled: true,
  shouldSort: false
});

Такой набор формирует поведение, близкое к полноценному тег-редактору внутри текстового input.

Оглавление