Установка через CDN

Подключение внешней версии библиотеки выполняется через публичные CDN-хранилища, позволяющие загружать JavaScript и стили без установки пакетов и сборщиков. В случае Tom Sel ect используется готовая UMD-сборка, доступная через сети доставки контента, такие как jsDelivr и unpkg.

Библиотека требует подключения двух основных ресурсов: JavaScript-логики и таблицы стилей. Без CSS компонент остаётся функциональным, но теряет визуальную структуру.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.default.min.css">

<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

Использование связки default.min.css и tom-select.complete.min.js обеспечивает полную сборку с поддержкой основных плагинов, включая поиск, мультивыбор и кастомные рендеры.

Альтернативный CDN-источник через unpkg:

<link rel="stylesheet" href="https://unpkg.com/tom-select@2.3.1/dist/css/tom-select.css">

<script src="https://unpkg.com/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

Различие между CDN заключается в политике кеширования и скорости доставки, при этом функциональность остаётся идентичной.

Базовая инициализация после подключения

После загрузки ресурсов библиотека становится доступной через глобальный объект TomSelect. Инициализация выполняется на стандартных <select> элементах.

<select id="select-beast">
  <option value="1">Гиппогриф</option>
  <option value="2">Дракон</option>
  <option value="3">Феникс</option>
</select>

<script>
  new TomSelect("#select-beast");
</script>

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

Подключение нескольких экземпляров

Один и тот же скрипт может применяться к множеству элементов на странице. Каждый экземпляр создаётся независимо, сохраняя собственное состояние и конфигурацию.

<select class="ts">
  <option value="a">Альфа</option>
  <option value="b">Бета</option>
</select>

<select class="ts">
  <option value="x">Кси</option>
  <option value="y">Омега</option>
</select>

<script>
  document.querySelectorAll(".ts").forEach((el) => {
    new TomSelect(el);
  });
</script>

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

Подключение с конфигурацией при CDN-использовании

Конфигурация передаётся вторым аргументом конструктора. При подключении через CDN все параметры остаются доступными без ограничений.

<script>
  new TomSelect("#select-beast", {
    create: true,
    sortField: "text",
    maxItems: 3,
    placeholder: "Выбор значения"
  });
</script>

Параметр create включает возможность добавления новых значений, отсутствующих в списке. sortField определяет сортировку, а maxItems ограничивает количество выбранных элементов.

Порядок загрузки скриптов

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

Вариант с размещением перед закрывающим тегом body:

<body>
  <select id="select-beast">
    <option value="1">Волк</option>
    <option value="2">Лиса</option>
  </select>

  <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

  <script>
    new TomSelect("#select-beast");
  </script>
</body>

Допустимо использование defer, если скрипт подключается в <head>:

<script defer src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

Подключение без CSS

При отсутствии CSS-библиотеки функциональность сохраняется, но интерфейс остаётся неоформленным. Такой режим используется при интеграции с собственными дизайн-системами.

<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

<script>
  new TomSelect("#select-beast");
</script>

Стилизация в этом случае полностью переносится на внешние CSS-правила проекта, включая классы .ts-wrapper, .ts-control, .ts-dropdown.

Использование разных версий через CDN

CDN позволяет фиксировать версию библиотеки для предотвращения неожиданных изменений поведения.

<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>

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

Подключение модульной версии через CDN ESM

Некоторые CDN предоставляют ESM-сборки, которые могут использоваться в современных браузерах с поддержкой type="module".

<script type="module">
  import TomSelect fr om "https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.mjs";

  new TomSelect("#select-beast");
</script>

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

Совместимость с внешними библиотеками

Подключение через CDN не ограничивает использование вместе с другими UI-фреймворками. Tom Select корректно работает в окружениях с динамической генерацией DOM, при условии повторной инициализации после вставки элементов.

<script>
  function initSelects() {
    document.querySelectorAll("select.ts").forEach((el) => {
      if (!el.tomselect) {
        new TomSelect(el);
      }
    });
  }

  document.addEventListener("DOMContentLoaded", initSelects);
</script>

Проверка el.tomselect предотвращает повторную инициализацию одного и того же элемента.

Подключение в условиях динамической загрузки страниц

При использовании AJAX-навигации или SPA-подобных решений требуется повторный запуск инициализации после изменения DOM.

<script>
  function refreshTomSelect() {
    document.querySelectorAll("select").forEach((el) => {
      if (!el.tomselect) {
        new TomSelect(el);
      }
    });
  }

  window.addEventListener("popstate", refreshTomSelect);
</script>

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

Оглавление