Учебник Tom Select

Введение
- Что такое Tom Select
- История создания и эволюция библиотеки
- Сравнение с другими решениями
- Когда использовать Tom Select
- Системные требования и совместимость
Установка и первоначальная настройка
- Установка через npm
- Установка через CDN
- Загрузка исходных файлов
- Подключение стилей
- Проверка работоспособности
- Структура файлов библиотеки
Базовая инициализация
- Простейший пример инициализации
- Инициализация для разных типов элементов
- Использование селекторов
- Множественная инициализация
- Уничтожение экземпляра
- Реинициализация
Основные опции конфигурации
- Структура объекта настроек
- Опции отображения
- Опции поведения
- Опции производительности
- Приоритеты настроек
- Валидация конфигурации
Работа с данными
- Загрузка статических данных
- Формат данных
- Группировка элементов
- Вложенные структуры данных
- Оптимизация больших наборов данных
- Кеширование данных
Удаленная загрузка данных
- Настройка AJAX запросов
- Параметры запроса
- Обработка ответов сервера
- Дебаунсинг и троттлинг
- Обработка ошибок загрузки
- Индикация процесса загрузки
- Пагинация результатов
События
- Обзор системы событий
- События жизненного цикла
- События взаимодействия пользователя
- События изменения данных
- События загрузки
- Прослушивание событий
- Отписка от событий
- Создание цепочек событий
Методы API
- Получение экземпляра
- Методы управления значениями
- Методы управления опциями
- Методы управления состоянием
- Методы поиска и фильтрации
- Программное управление фокусом
- Методы обновления интерфейса
Плагины
- Архитектура плагинов
- Подключение плагинов
- Checkbox Options
- Clear Button
- Dropdown Header
- Dropdown Footer
- Remove Button
- Restore on Backspace
- Input Autogrow
- Virtual Scroll
- Caret Position
- Drag Drop
Создание собственных плагинов
- Структура плагина
- Хуки жизненного цикла
- Доступ к API Tom Select
- Модификация DOM
- Добавление опций конфигурации
- Обработка событий в плагинах
- Регистрация плагина
- Распространение плагина
Кастомизация внешнего вида
- Структура HTML разметки
- Переопределение CSS классов
- Темы оформления
- Создание собственной темы
- Адаптивный дизайн
- Иконки и графические элементы
- Анимации и переходы
Рендеринг
- Функции рендеринга
- Кастомизация отображения элементов
- Кастомизация отображения выбранных значений
- Кастомизация заголовков групп
- Шаблонизация с HTML
- Использование функций рендеринга для безопасности
- Производительность рендеринга
Поиск и фильтрация
- Встроенный поисковый движок
- Настройка параметров поиска
- Алгоритмы сопоставления
- Нечеткий поиск
- Поиск по нескольким полям
- Сортировка результатов
- Выделение совпадений
Валидация и ограничения
- Ограничение количества выбранных элементов
- Валидация пользовательского ввода
- Запрет дублирующихся значений
- Блокировка определенных опций
- Обязательные поля
- Интеграция с HTML5 валидацией
- Пользовательские правила валидации
Создание новых элементов
- Включение режима создания
- Настройка создания элементов
- Валидация новых элементов
- Обработка создания на сервере
- Синхронизация созданных элементов
- Ограничения создания
Работа с формами
- Интеграция с HTML формами
- Сериализация данных
- Отправка форм
- Обработка FormData
- Синхронизация с оригинальным select
- Работа с hidden полями
- Валидация на стороне клиента
Множественный выбор
- Настройка режима multiple
- Управление выбранными элементами
- Drag and drop для сортировки
- Удаление выбранных элементов
- Ограничения множественного выбора
- Отображение счетчика выбранных
Группировка опций
- Создание групп
- Стилизация групп
- Сворачивание и разворачивание групп
- Сортировка внутри групп
- Поиск по группам
- Вложенные группы
Доступность
- ARIA атрибуты
- Навигация с клавиатуры
- Поддержка скринридеров
- Фокус менеджмент
- Контрастность и читаемость
- Альтернативные способы взаимодействия
Производительность
- Виртуализация списков
- Ленивая загрузка
- Оптимизация рендеринга
- Дебаунсинг пользовательского ввода
- Профилирование и бенчмарки
- Минимизация перерисовок
- Работа с большими объемами данных
Интеграция с фреймворками
- Vanilla JavaScript
- React компонент
- Vue компонент
- Angular директива
- Svelte компонент
- Управление жизненным циклом
- Реактивность и обновления
Локализация
- Настройка языка интерфейса
- Перевод системных сообщений
- Множественные языки
- RTL поддержка
- Форматирование чисел и дат
- Динамическая смена языка
Мобильные устройства
- Адаптация под сенсорные экраны
- Нативные элементы на мобильных
- Оптимизация производительности
- Размеры и отступы для касаний
- Виртуальная клавиатура
- Жесты и свайпы
Отладка
- Режим отладки
- Логирование событий
- Инспекция состояния
- Распространенные ошибки
- Использование браузерных DevTools
- Отладка плагинов
Безопасность
- XSS защита
- Санитизация пользовательского ввода
- Экранирование HTML
- Content Security Policy
- Валидация на сервере
- Безопасная работа с удаленными данными
Миграция
- Миграция с Selectize
- Миграция с Select2
- Миграция с Choices.js
- Обратная совместимость
- Изменения в API между версиями
- Стратегии постепенной миграции
Типизация TypeScript
- Установка типов
- Основные типы и интерфейсы
- Типизация конфигурации
- Типизация событий
- Типизация плагинов
- Расширение базовых типов
- Строгая типизация данных
Сборка и бандлинг
- Webpack конфигурация
- Rollup конфигурация
- Vite конфигурация
- Исключение неиспользуемых плагинов
- Минификация и оптимизация
- Source maps
- Разделение кода
Тестирование
- Юнит-тестирование компонентов
- Интеграционное тестирование
- E2E тестирование
- Тестирование доступности
- Моки и стабы
- Тестирование асинхронной загрузки
- Покрытие кода тестами
Расширенные техники
- Каскадные селекты
- Автокомплит с подсказками
- Мастер-детальные отношения
- Условная видимость опций
- Динамическая загрузка зависимых данных
- Комбинирование нескольких экземпляров
- Синхронизация между селектами
Оптимизация SEO
- Прогрессивное улучшение
- Server-side rendering
- Индексация содержимого
- Микроразметка
- Альтернативы для краулеров
- Гидратация на клиенте
Решение типовых задач
- Выбор стран и городов
- Выбор тегов
- Множественный email ввод
- Выбор цветов
- Временные диапазоны
- Выбор файлов и медиа
- Фильтры таблиц
Справочник API
- Полный список опций
- Полный список методов
- Полный список событий
- Полный список плагинов
- CSS классы и селекторы
- Data-атрибуты