Инициализация text input

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

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

Подключение через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

Локальная установка через пакетный менеджер:

npm install choices.js

Подключение в модульной системе:

import Choices from "choices.js";
import "choices.js/public/assets/styles/choices.min.css";

После подключения становится доступен конструктор Choices, который принимает DOM-элемент и объект конфигурации.

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

Для работы с текстовым полем используется стандартный <input type="text">. Choices.js преобразует его в интерактивный компонент с возможностью добавления пользовательских значений.

HTML-разметка:

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

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

const element = document.getElementById("tag-input");

const choices = new Choices(element);

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

Режим добавления пользовательских значений

Одной из ключевых особенностей текстового input в Choices.js является возможность превращения введённого текста в элемент списка. Это поведение управляется параметром addItems и duplicateItemsAllowed.

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

const choices = new Choices("#tag-input", {
  addItems: true,
  duplicateItemsAllowed: false,
  delimiter: ",",
});

addItems определяет, можно ли добавлять введённые значения как элементы.

delimiter задаёт разделитель, при котором строка автоматически разбивается на несколько элементов.

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

Автосоздание опций (createItem)

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

const choices = new Choices("#tag-input", {
  createItems: true,
  addItems: true,
});

Поведение изменяется следующим образом:

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

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

Ограничение ввода и контроль значений

Choices.js позволяет управлять количеством вводимых элементов через maxItemCount. Это важно при работе с текстовыми input в режиме мультиввода.

const choices = new Choices("#tag-input", {
  maxItemCount: 5,
});

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

Дополнительно используется:

maxItemText: (maxItemCount) => {
  return `Максимум ${maxItemCount} элементов`;
}

Эта функция управляет текстом уведомления при превышении лимита.

Разделение текста на элементы

В текстовом input часто требуется автоматически преобразовывать строку в список значений. Это реализуется через delimiter.

const choices = new Choices("#tag-input", {
  delimiter: ",",
  addItems: true,
});

При вводе:

html, css, javascript

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

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

События и реакция на ввод

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

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

  • addItem
  • removeItem
  • change
  • search

Пример обработки добавления элемента:

const element = document.querySelector("#tag-input");

const choices = new Choices(element);

element.addEventListener("addItem", function(event) {
  console.log("Добавлено значение:", event.detail.value);
});

Событие содержит объект detail, в котором хранится текущее значение, тип действия и дополнительная метаинформация.

Событие изменения:

element.addEventListener("change", function(event) {
  console.log("Текущее состояние:", event.detail.value);
});

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

После инициализации объект Choices предоставляет методы для программного управления текстовым input.

Добавление значения вручную:

choices.setValue(["React", "Vue"]);

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

choices.setChoiceByValue("JavaScript");

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

choices.removeActiveItems();

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

choices.removeItemsByValue("React");

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

Работа с фокусом и вводом

Текстовый input внутри Choices.js сохраняет поведение стандартного поля, но расширяется дополнительной логикой.

Методы управления фокусом:

choices.showDropdown();
choices.hideDropdown();

Фокусировка на поле:

element.focus();

При активации input автоматически открывается список возможных вариантов, если включён режим поиска или предзаполненных значений.

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

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

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

const choices = new Choices("#tag-input", {
  editItems: true,
  removeItemButton: true,
  duplicateItemsAllowed: false,
  paste: true,
});

editItems разрешает редактирование уже добавленных значений.

removeItemButton добавляет кнопку удаления элемента.

paste определяет, можно ли вставлять данные из буфера обмена.

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

Обработка вставки больших строк

При вставке текста Choices.js может автоматически разбивать строку на элементы. Поведение зависит от комбинации delimiter и paste.

const choices = new Choices("#tag-input", {
  paste: true,
  delimiter: ",",
  addItems: true,
});

При вставке:

node, react, angular, vue

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

Для более сложной логики можно перехватывать событие paste и реализовывать кастомный парсинг.

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

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

Пример добавления новых опций:

choices.setChoices([
  { value: "PHP", label: "PHP" },
  { value: "Python", label: "Python" }
], "value", "label", true);

При использовании с текстовым input это может служить механизмом подсказок или автодополнения.

Связь с внешними данными

Text input в Choices.js часто используется в связке с API. В этом случае ввод пользователя используется как триггер для поиска.

Пример:

const element = document.querySelector("#tag-input");

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

element.addEventListener("search", async (event) => {
  const query = event.detail.value;

  const response = await fetch(`/api/tags?q=${query}`);
  const data = await response.json();

  choices.setChoices(data, "id", "name", true);
});

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

Поведение при очистке и сбросе

Очистка текстового input выполняется через удаление активных элементов:

choices.clearStore();

или

choices.removeActiveItems();

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

Валидация введённых значений

Choices.js не является системой валидации, но позволяет реализовать её через события.

Пример проверки:

element.addEventListener("addItem", function(event) {
  if (event.detail.value.length < 3) {
    choices.removeItemsByValue(event.detail.value);
  }
});

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

Особенности работы с одиночным text input

При использовании Choices.js с одиночным input (без мультиввода) поведение меняется:

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

Конфигурация:

const choices = new Choices("#tag-input", {
  maxItemCount: 1,
  addItems: true,
});

Такой режим используется для кастомных поисковых строк, фильтров и autocomplete-полей с единственным значением.

Оглавление