Инициализация для разных типов элементов

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

Одиночный <select>

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

<select id="country-select">
  <option value="kz">Kazakhstan</option>
  <option value="ru">Russia</option>
  <option value="de">Germany</option>
</select>
new TomSelect("#country-select");

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

Множественный <select multiple>

При использовании атрибута multiple компонент автоматически переключается в режим работы с массивом значений.

<select id="tags-select" multiple>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="css">CSS</option>
</select>
new TomSelect("#tags-select");

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

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

Инициализация с предзаданными значениями

Если у <select> уже установлены selected-опции, Tom Select автоматически синхронизирует их с внутренним состоянием.

<select id="lang-select">
  <option value="en">English</option>
  <option value="fr" selected>French</option>
  <option value="es">Spanish</option>
</select>
new TomSelect("#lang-select");

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

Пустой <select> и динамическое заполнение

При отсутствии <option> элементы могут быть добавлены программно через конфигурацию options.

<select id="empty-select"></select>
new TomSelect("#empty-select", {
  options: [
    { value: "1", text: "Item 1" },
    { value: "2", text: "Item 2" }
  ]
});

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

Группы опций (<optgroup>)

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

<select id="group-select">
  <optgroup label="Frontend">
    <option value="react">React</option>
    <option value="vue">Vue</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node.js</option>
    <option value="go">Go</option>
  </optgroup>
</select>
new TomSelect("#group-select");

Поведение:

  • группы сохраняются визуально;
  • поиск распространяется на все группы;
  • выбор не ломает структуру <optgroup>.

Инициализация через JavaScript-данные

Tom Select может полностью обходиться без DOM-опций, используя только массив данных.

<select id="js-data"></select>
new TomSelect("#js-data", {
  options: [
    { value: "kz", text: "Kazakhstan" },
    { value: "uz", text: "Uzbekistan" }
  ],
  items: ["kz"]
});

Этот способ полезен при SPA-архитектурах, где UI формируется на основе состояния приложения.

Асинхронная инициализация (позднее наполнение)

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

<select id="async-select"></select>
const select = new TomSelect("#async-select", {
  options: []
});

fetch("/api/items")
  .then(res => res.json())
  .then(data => {
    data.forEach(item => {
      select.addOption(item);
    });

    select.refreshOptions(false);
  });

Ключевые моменты:

  • инициализация происходит до загрузки данных;
  • addOption добавляет элементы в рантайме;
  • refreshOptions обновляет отображение списка.

Управление disabled-состоянием

Отключённые элементы сохраняют состояние, но не участвуют в выборе.

<select id="disabled-select" disabled>
  <option value="a">A</option>
  <option value="b">B</option>
</select>
new TomSelect("#disabled-select");

Логика:

  • UI блокируется;
  • внутреннее состояние не принимает изменения;
  • восстановление доступно через изменение DOM или API.

Инициализация с кастомными атрибутами данных

При использовании data-* атрибутов возможно расширение модели данных.

<select id="data-select">
  <option value="1" data-type="premium">Pro</option>
  <option value="2" data-type="free">Basic</option>
</select>
new TomSelect("#data-select", {
  render: {
    option: function(data, escape) {
      return `<div>${escape(data.text)} (${data.type})</div>`;
    }
  }
});

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

Повторная инициализация и защита от дублирования

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

const el = document.querySelector("#country-select");

if (!el.tomselect) {
  new TomSelect(el);
}

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

  • экземпляр сохраняется в свойстве tomselect;
  • предотвращается дублирование UI-обёрток;
  • упрощается контроль жизненного цикла компонента.
Оглавление