Полный список плагинов

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

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

new TomSelect('#select', {
  plugins: ['remove_button', 'clear_button']
});

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

remove_button

Плагин remove_button добавляет кнопку удаления для каждого выбранного элемента в режиме множественного выбора. Он внедряет интерактивный элемент внутри “тега”, позволяя пользователю удалять значения без открытия выпадающего списка.

Ключевые особенности:

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

Поведение можно дополнительно кастомизировать через CSS и шаблоны рендеринга item.

clear_button

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

Функциональные аспекты:

  • вызывает полную очистку текущего состояния выбора;
  • триггерит стандартные события изменения (change);
  • интегрируется с single и multiple режимами.

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

drag_drop

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

Особенности реализации:

  • использует HTML5 Drag and Drop API;
  • обновляет внутренний порядок массива значений;
  • синхронизирует визуальное представление с моделью данных.

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

Плагин dropdown_input переносит поле ввода внутрь выпадающего списка. Это изменяет UX-модель: ввод осуществляется непосредственно в контексте списка, а не в отдельном инпуте.

Поведенческие изменения:

  • input становится частью dropdown;
  • фокус автоматически переносится при открытии;
  • улучшает сценарии поиска в больших списках.

Этот плагин часто используется в связке с удалёнными источниками данных.

optgroup_columns

Плагин optgroup_columns преобразует стандартные группы <optgroup> в колонночное отображение. Это визуальное улучшение особенно заметно при большом количестве категорий.

Функциональность:

  • распределяет группы по колонкам;
  • улучшает навигацию по структурированным спискам;
  • адаптируется под ширину контейнера.

Используется в сложных справочниках и каталогах.

no_backspace_delete

Плагин no_backspace_delete отключает удаление выбранных элементов при нажатии Backspace в пустом input.

Поведение:

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

Часто применяется в корпоративных интерфейсах, где важна защита от ошибок ввода.

restore_on_backspace

Плагин restore_on_backspace реализует обратную механику: при нажатии Backspace последний выбранный элемент возвращается обратно в поле ввода.

Логика работы:

  • удаляет последний элемент из списка выбранных;
  • возвращает его в input как текст;
  • позволяет быстро редактировать выбор.

Этот плагин полезен в сценариях быстрого редактирования тегов.

clear_button и remove_button в связке

При совместном использовании clear_button и remove_button формируется двухуровневая система управления:

  • точечное удаление через элементы;
  • массовая очистка через отдельный контрол.

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

change_listener

Плагин change_listener усиливает реактивность компонента, добавляя дополнительные обработчики изменений состояния.

Функциональные возможности:

  • расширенное отслеживание изменений value;
  • синхронизация с внешними state-менеджерами;
  • генерация дополнительных событий при модификации данных.

Особенно полезен при интеграции с React-подобными архитектурами или кастомными системами состояния.

virtual_scroll

Плагин virtual_scroll оптимизирует работу с большими списками, отрисовывая только видимую часть элементов.

Основные механизмы:

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

Критичен для сценариев с динамическими или загружаемыми списками.

Комбинирование плагинов

Плагины в Tom Select не изолированы и могут взаимодействовать друг с другом. Например:

  • virtual_scroll эффективно сочетается с dropdown_input при больших наборах данных;
  • remove_button и drag_drop совместно обеспечивают полный контроль над выбранными элементами;
  • change_listener выступает связующим слоем для внешних систем.

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

Расширяемость через плагины

Архитектура плагинов построена так, чтобы сторонние разработчики могли создавать собственные расширения без модификации ядра. Плагин может:

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

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

Оглавление