Использование с ванильным JavaScript

Инициализация Choices.js в ванильном JavaScript выполняется напрямую через работу с DOM-элементом <select> или <input>, после чего создаётся экземпляр класса, управляющий поведением пользовательского интерфейса, поиском, тегами и состоянием выбранных значений.

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

const element = document.querySelector('#example-select');

const choices = new Choices(element);

После выполнения создаётся экземпляр, который заменяет стандартное поведение элемента расширенным UI с поиском, кастомным рендерингом и управлением списком опций.

Важной особенностью является то, что библиотека не требует фреймворков и полностью опирается на стандартные DOM API.

Инициализация с опциями конфигурации

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

const choices = new Choices(element, {
  searchEnabled: true,
  itemSelectText: '',
  shouldSort: false,
  placeholderValue: 'Выбор значения'
});

Основные параметры влияют на:

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

Каждая опция применяется во время инициализации и может изменять внутреннюю структуру рендера.

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

Choices.js поддерживает как одиночный выбор, так и мультивыбор. Режим определяется атрибутом multiple у исходного элемента <select>.

<select id="example-select" multiple>
  <option value="1">Первый</option>
  <option value="2">Второй</option>
  <option value="3">Третий</option>
</select>

Инициализация остаётся идентичной:

const choices = new Choices(document.querySelector('#example-select'));

В режиме множественного выбора внутренняя модель данных хранит массив выбранных значений, а UI отображает их как отдельные элементы-теги.

Добавление и удаление элементов через API

Экземпляр предоставляет методы управления состоянием без прямого взаимодействия с DOM.

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

choices.setChoiceByValue('2');

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

choices.removeActiveItemsByValue('2');

Полная очистка выбора:

choices.removeActiveItems();

Методы синхронизируют внутреннее состояние и DOM-отображение.

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

В ванильном JavaScript часто требуется изменение списка без перезагрузки страницы. Для этого используется метод setChoices.

choices.setChoices([
  { value: '10', label: 'Десять', selected: false },
  { value: '20', label: 'Двадцать', selected: false }
], 'value', 'label', true);

Параметры метода:

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

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

Асинхронная загрузка данных

Choices.js может использоваться совместно с fetch-запросами, формируя динамические списки.

fetch('/api/items')
  .then(response => response.json())
  .then(data => {
    choices.setChoices(data, 'id', 'name', true);
  });

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

При большом объёме данных используется предварительная фильтрация или серверная пагинация.

Управление поиском и фильтрацией

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

const choices = new Choices(element, {
  searchEnabled: true,
  searchFloor: 2,
  searchResultLimit: 10
});

Параметры:

  • searchFloor — минимальное количество символов для активации поиска
  • searchResultLimit — ограничение результатов

Фильтрация выполняется на стороне клиента, что делает важным контроль объёма данных.

События экземпляра Choices

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

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

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

  • addItem — добавление элемента
  • removeItem — удаление элемента
  • search — ввод текста в поле поиска
  • highlightItem — наведение на элемент

Каждое событие содержит объект detail, включающий текущее состояние и данные элемента.

Программное управление состоянием

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

choices.disable();
choices.enable();

Также доступна перезагрузка состояния:

choices.clearStore();

При необходимости полного восстановления используется повторная инициализация или очистка DOM-обвязки.

Работа с плейсхолдерами и текстами интерфейса

Настройка текстовых элементов осуществляется через параметры конфигурации.

const choices = new Choices(element, {
  placeholder: true,
  placeholderValue: 'Выберите значение',
  noResultsText: 'Ничего не найдено',
  noChoicesText: 'Нет доступных вариантов'
});

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

Синхронизация с исходным элементом

Choices.js поддерживает двустороннюю синхронизацию с <select>. При изменении через API обновляется исходный DOM-элемент, что обеспечивает корректную работу стандартных форм.

choices.setChoiceByValue('1');
console.log(element.value);

В режиме multiple значение представлено массивом выбранных элементов.

Уничтожение экземпляра и очистка DOM

При динамическом создании интерфейсов требуется корректное освобождение ресурсов.

choices.destroy();

После выполнения:

  • восстанавливается исходный <select>
  • удаляются дополнительные DOM-узлы
  • снимаются обработчики событий

Это важно при работе с SPA или повторной инициализацией компонентов.

Интеграция с чистым DOM-потоком

В ванильном JavaScript Choices.js часто используется в связке с прямыми манипуляциями DOM.

Пример динамической замены списка:

const select = document.querySelector('#example-select');

select.innerHTML = `
  <option value="a">A</option>
  <option value="b">B</option>
`;

choices.destroy();
const newChoices = new Choices(select);

Такой подход применяется при полной перестройке данных.

Работа с кастомными атрибутами данных

Choices.js поддерживает расширенные данные через data-* атрибуты.

<option value="1" data-custom="meta">Элемент</option>

Эти данные доступны внутри событий:

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

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

Управление фокусом и поведением интерфейса

Фокусировка и открытие списка управляются через API:

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

Также возможно программное переключение состояния:

choices.input.focus();

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

Производительность при работе с DOM

При использовании ванильного JavaScript критичным становится количество операций с DOM. Choices.js минимизирует прямые обращения, однако при больших списках рекомендуется:

  • ограничивать количество элементов
  • использовать серверную фильтрацию
  • избегать частых вызовов setChoices
  • переинициализировать компонент при массовых изменениях

В противном случае возникает деградация производительности из-за перерасчёта виртуального состояния и перерисовки UI.

Особенности поведения в чистой среде без фреймворков

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

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

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

Оглавление