Простейшие примеры использования

Основой интеграции служит стандартный элемент <select>, который библиотека преобразует в кастомный UI без изменения семантики формы. Slim Select не заменяет HTML-структуру, а оборачивает её, сохраняя совместимость с нативной отправкой данных.

Минимальная разметка:

<select id="basic-select">
  <option value="1">JavaScript</option>
  <option value="2">TypeScript</option>
  <option value="3">Python</option>
</select>

Ключевой момент заключается в том, что библиотека работает только с уже существующим DOM-элементом. Любая инициализация происходит поверх него, без необходимости переписывать структуру.

Минимальная инициализация Slim Select

Подключённая библиотека активируется через создание экземпляра класса SlimSelect. Базовая инициализация требует указания селектора элемента:

new SlimSelect({
  select: '#basic-select'
});

После выполнения этого кода стандартный <select> заменяется кастомным компонентом с поддержкой поиска, стилизации и управления списком.

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

Подключение с конфигурацией по умолчанию

Даже в простейшем варианте можно передавать объект настроек. Это позволяет управлять базовым поведением без усложнения структуры:

new SlimSelect({
  select: '#basic-select',
  settings: {
    showSearch: true
  }
});

Параметр showSearch включает поле поиска внутри выпадающего списка, что особенно полезно при большом количестве опций.

Работа с placeholder

HTML-атрибут placeholder не всегда даёт нужный эффект, поэтому Slim Select поддерживает собственную настройку через settings.

Разметка:

<select id="placeholder-select">
  <option data-placeholder="true"></option>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
</select>

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

new SlimSelect({
  select: '#placeholder-select',
  settings: {
    placeholderText: 'Выбор языка'
  }
});

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

Множественный выбор (multiple select)

Slim Select поддерживает стандартный атрибут multiple, который расширяет поведение списка.

HTML:

<select id="multi-select" multiple>
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">JavaScript</option>
</select>

Jav * aScript:

new SlimSelect({
  select: '#multi-select'
});

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

Установка значений программно

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

const select = new SlimSelect({
  select: '#basic-select'
});

select.set('2');

Для множественного выбора используется массив:

select.set(['1', '3']);

Механизм синхронизации обновляет как UI-компонент, так и исходный <select>.

Получение текущего значения

Получение состояния выполняется через свойство selected:

const select = new SlimSelect({
  select: '#basic-select'
});

console.log(select.selected);

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

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

Slim Select позволяет изменять список опций без пересоздания экземпляра.

const select = new SlimSelect({
  select: '#basic-select'
});

select.addOption({
  text: 'Go',
  value: 'go'
});

Добавленные элементы сразу становятся доступными в UI и могут быть выбраны пользователем.

Удаление опций

Удаление выполняется через передачу значения:

select.removeOption('2');

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

Очистка выбранного значения

Сброс состояния реализуется через пустое значение:

select.set('');

Для множественного выбора:

select.set([]);

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

Отключение и включение состояния

Контроль активности компонента реализуется через метод disable и enable:

select.disable();
select.enable();

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

Обновление после внешних изменений DOM

Если <select> изменяется вручную (например, через innerHTML), требуется синхронизация:

select.setData();

Метод пересобирает внутреннюю модель данных на основе текущего состояния DOM.

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

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

select.destroy();

После вызова происходит восстановление исходного <select> и удаление всех обёрток Slim Select. Это важно при динамической работе интерфейса и повторной инициализации.

Простая комбинация возможностей

Базовый пример, объединяющий несколько операций:

const select = new SlimSelect({
  select: '#basic-select',
  settings: {
    showSearch: true,
    placeholderText: 'Выбор технологии'
  }
});

select.set('3');

select.addOption({
  text: 'Rust',
  value: 'rust'
});

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

Оглавление