Создание первого экземпляра

Slim Select инициализируется через создание экземпляра, который связывается с существующим HTML-элементом <select> и преобразует его в управляемый компонент с расширенными возможностями: поиск, кастомные рендеры, множественный выбор, управление состоянием и динамическое обновление списка опций.

Перед подключением библиотеки требуется стандартный элемент формы:

<select id="basic-select">
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="py">Python</option>
</select>

Slim Select работает именно с нативным <select>, не заменяя его логически, а оборачивая и синхронизируя состояние.

Подключение библиотеки

Перед созданием экземпляра необходимо подключить сам Slim Select и стили:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@latest/dist/slimselect.css">
<script src="https://cdn.jsdelivr.net/npm/slim-select@latest/dist/slimselect.min.js"></script>

После загрузки скрипта в глобальной области становится доступен конструктор SlimSelect.

Создание первого экземпляра

Инициализация выполняется через вызов конструктора с передачей конфигурационного объекта:

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

Ключевой параметр select указывает CSS-селектор элемента <select>, который будет преобразован. В момент выполнения создаётся новый экземпляр, а оригинальный элемент связывается с виртуальным представлением компонента.

Механизм привязки к DOM

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

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

Нативный <select> при этом сохраняется в DOM, но становится скрытым или визуально деактивированным, в зависимости от конфигурации.

Поведение без дополнительных параметров

При минимальной инициализации Slim Select использует значения по умолчанию:

  • одиночный выбор активен
  • поиск отключён
  • кастомизация интерфейса минимальна
  • исходные <option> используются как источник данных

Пример:

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

Такой вызов создаёт полностью рабочий компонент без дополнительной настройки.

Внутренняя модель данных

Каждый <option> преобразуется во внутреннюю структуру:

  • value — идентификатор значения
  • text — отображаемый текст
  • selected — текущее состояние выбора
  • disabled — состояние доступности

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

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

После инициализации библиотека синхронизирует текущее значение <select> с внутренним состоянием. Если у элемента задан selected:

<option value="js" selected>JavaScript</option>

то Slim Select автоматически отразит это состояние в интерфейсе.

Скрытие нативного элемента

Оригинальный <select> не удаляется из DOM. Вместо этого он:

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

Поверх него строится новый DOM-блок, содержащий интерфейс выбора.

Базовая структура экземпляра

Созданный объект можно рассматривать как инкапсулированный компонент:

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

Экземпляр хранит:

  • ссылку на DOM-элемент
  • состояние выбранных значений
  • список доступных опций
  • методы управления (обновление, установка значения, очистка)

Работа с несколькими экземплярами

Каждый вызов конструктора создаёт независимый экземпляр:

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

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

Ошибки и ограничения при инициализации

При создании экземпляра возможны типичные ошибки:

  • передан несуществующий селектор
  • элемент не является <select>
  • DOM ещё не загружен

Корректная инициализация требует наличия элемента в момент вызова конструктора.

Пример полной минимальной интеграции

<select id="language-select">
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="go">Go</option>
</select>

<script>
  new SlimSelect({
    select: '#language-select'
  });
</script>

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

Оглавление