Добавление placeholder

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

Базовая настройка placeholder

В Choices.js управление placeholder осуществляется через параметр конфигурации placeholder и связанное с ним значение placeholderValue.

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

  • placeholder: true — включает отображение placeholder
  • placeholderValue: string — задаёт текст placeholder

Пример инициализации:

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

const choices = new Choices(element, {
  placeholder: true,
  placeholderValue: 'Выберите значение'
});

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

Поведение placeholder в одиночном выборе

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

Особенности поведения:

  • отображается только при отсутствии выбранного значения
  • исчезает после выбора первого элемента
  • возвращается при очистке выбора (если включена возможность очистки)

Дополнительно важен параметр allowHTML, влияющий на интерпретацию содержимого placeholder, особенно при использовании разметки.

const choices = new Choices('#select', {
  placeholder: true,
  placeholderValue: 'Выберите категорию',
  allowHTML: false
});

Placeholder в мультиселекте

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

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

const choices = new Choices('#multi-select', {
  placeholder: true,
  placeholderValue: 'Выберите элементы',
  removeItemButton: true
});

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

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

Placeholder и поиск (search input)

В Choices.js существует отдельный placeholder для строки поиска внутри выпадающего списка. Он задаётся через параметр searchPlaceholderValue.

const choices = new Choices('#select', {
  searchEnabled: true,
  searchPlaceholderValue: 'Поиск...'
});

Особенности:

  • отображается внутри input-поля поиска
  • активен только при включённом searchEnabled
  • не связан с основным placeholder селекта

При отключённом поиске параметр не оказывает влияния на интерфейс.

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

  • основной placeholder — для состояния выбора
  • searchPlaceholderValue — для поля фильтрации

Пример:

const choices = new Choices('#select', {
  placeholder: true,
  placeholderValue: 'Выберите город',
  searchEnabled: true,
  searchPlaceholderValue: 'Введите название города'
});

Placeholder и disabled состояние

При отключённом состоянии элемента (disabled: true) placeholder может продолжать отображаться, однако взаимодействие с ним блокируется.

const choices = new Choices('#select', {
  placeholder: true,
  placeholderValue: 'Нет доступных значений',
  shouldSort: false,
  searchEnabled: false
});

В таком режиме placeholder часто используется как индикатор отсутствия данных.

Динамическое изменение placeholder

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

Один из подходов — уничтожение и повторная инициализация:

choices.destroy();

const newChoices = new Choices('#select', {
  placeholder: true,
  placeholderValue: 'Новый текст placeholder'
});

Другой вариант — обновление через манипуляцию DOM-значением исходного элемента с последующим вызовом обновления:

element.setAttribute('placeholder', 'Новый текст');
choices.init();

Placeholder и кастомные значения

При использовании объектов данных (label / value) placeholder продолжает работать независимо от структуры данных.

const choices = new Choices('#select', {
  placeholder: true,
  placeholderValue: 'Выберите язык',
  choices: [
    { value: 'ru', label: 'Русский' },
    { value: 'en', label: 'English' }
  ]
});

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

Особенности рендера placeholder

Внутренний рендер Choices.js обрабатывает placeholder как отдельный UI-элемент. Он не является частью списка choices и не участвует в фильтрации или поиске.

Поведение при рендере:

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

Сочетание placeholder и очистки значения

При включённой опции removeItemButton или allowClear placeholder возвращается после удаления последнего выбранного элемента.

const choices = new Choices('#select', {
  placeholder: true,
  placeholderValue: 'Выберите опцию',
  removeItemButton: true,
  allowSingleDeselect: true
});

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

Поведение при программной установке значения

При установке значения через API placeholder автоматически скрывается:

choices.setChoiceByValue('ru');

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

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

При очистке значения через clearStore() или аналогичные методы placeholder возвращается в исходное состояние.

Оглавление