Работа с placeholder

Placeholder в Slim Select выполняет роль визуального и семантического ориентира в момент, когда пользователь ещё не сделал выбор. В стандартном HTML <select> этот механизм реализуется через <option selected disabled> с пустым значением, однако Slim Select расширяет поведение, добавляя более гибкую конфигурацию и контроль над отображением состояния «ничего не выбрано».

В Slim Select placeholder не является отдельным DOM-элементом. Он подменяет текст выбранного значения в состоянии, когда выбор отсутствует. Это означает, что компонент всегда находится в одном из двух состояний:

  • есть выбранное значение → отображается выбранная опция
  • нет выбранного значения → отображается placeholder

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

Инициализация через конфигурацию

Самый прямой способ задания placeholder — через параметр конфигурации:

new SlimSelect({
  select: '#mySelect',
  placeholder: 'Выберите значение'
});

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

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

Использование нативного option как placeholder

Альтернативный подход основан на стандартной HTML-разметке:

<select id="mySelect">
  <option value="" selected disabled>Выберите значение</option>
  <option value="1">Первый вариант</option>
  <option value="2">Второй вариант</option>
</select>

Slim Select интерпретирует такую структуру следующим образом:

  • пустое значение (value="") трактуется как отсутствие выбора
  • disabled исключает опцию из выбора
  • selected задаёт начальное состояние

Этот способ особенно полезен при серверной генерации HTML, где логика placeholder уже встроена в шаблон.

Поведение placeholder в single select

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

Особенность Slim Select заключается в том, что при очистке значения (если включена возможность сброса) placeholder возвращается автоматически:

new SlimSelect({
  select: '#mySelect',
  placeholder: 'Выберите значение',
  allowDeselect: true
});

При снятии выбора компонент возвращается в исходное состояние.

Placeholder и множественный выбор

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

new SlimSelect({
  select: '#mySelect',
  placeholder: 'Выберите элементы',
  isMultiple: true
});

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

При удалении всех элементов состояние автоматически возвращается к placeholder.

Взаимодействие с динамическими данными

При работе с динамическими источниками данных placeholder сохраняет свою роль индикатора пустого состояния, даже если список опций обновляется асинхронно:

const slim = new SlimSelect({
  select: '#mySelect',
  placeholder: 'Загрузка данных...'
});

// позже обновление
slim.setData([
  { text: 'Alpha', value: 'a' },
  { text: 'Beta', value: 'b' }
]);

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

Сочетание placeholder и поиска

В Slim Select встроен поиск, и placeholder может использоваться как подсказка в закрытом состоянии компонента. Однако важно различать:

  • placeholder основного поля выбора
  • placeholder поискового инпута

Для поискового поля отдельной настройки placeholder нет в базовой конфигурации, но можно модифицировать DOM после инициализации:

const slim = new SlimSelect({
  select: '#mySelect',
  placeholder: 'Выберите значение'
});

document.querySelector('.ss-search input').placeholder = 'Поиск...';

Этот подход зависит от внутренней структуры Slim Select и может требовать адаптации под версию библиотеки.

Обновление placeholder после инициализации

Slim Select не всегда предоставляет прямой API для изменения placeholder «на лету», поэтому используется пересоздание экземпляра или ручное обновление DOM-состояния:

const slim = new SlimSelect({
  select: '#mySelect',
  placeholder: 'Первый текст'
});

// изменение поведения через пересоздание
slim.destroy();

new SlimSelect({
  select: '#mySelect',
  placeholder: 'Новый текст'
});

Такой подход гарантирует корректное обновление состояния без рассинхронизации внутреннего кэша.

Связь placeholder с пустым значением

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

Типичная ошибка — использование значения "0" как «пустого». Для Slim Select это полноценное выбранное значение, поэтому placeholder не отображается.

Правильная модель пустоты:

  • null (внутреннее состояние)
  • "" (HTML select пустое значение)
  • отсутствие выбранной опции

Стилизация placeholder

В Slim Select placeholder визуально оформляется через CSS-классы состояния компонента. Основная логика:

  • отсутствие выбранного значения → активный placeholder-класс
  • наличие значения → обычный текст выбранного элемента

Это позволяет переопределять стиль:

.ss-main .ss-placeholder {
  color: #9aa0a6;
  font-style: italic;
}

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

Поведение при очистке формы

При сбросе формы через стандартный HTML reset Slim Select синхронизирует состояние с DOM:

<form>
  <select id="mySelect">
    <option value="" selected disabled>Выберите значение</option>
    <option value="1">Первый</option>
  </select>
  <button type="reset">Reset</button>
</form>

После reset компонент возвращается к placeholder автоматически, если начальное состояние корректно определено в разметке.

Типичные ошибки при работе с placeholder

Часто встречающиеся проблемы связаны не с самой библиотекой, а с логикой использования:

  • одновременное использование placeholder и реального option с тем же текстом
  • отсутствие selected у пустой опции в HTML
  • попытка использовать placeholder как часть данных формы
  • установка значения 0 как «пустого» состояния
  • динамическое обновление данных без сброса selection

Корректная работа placeholder всегда опирается на строгое разделение между «нет выбора» и «выбранное значение».

Оглавление