Стандартные опции по умолчанию

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

Объект настроек передаётся в конструктор и формирует поведение селекта:

new SlimSelect({
  select: '#my-select',
  settings: {}
});

Поле settings содержит ключевые параметры, которые определяют внешний вид и функциональность. При отсутствии пользовательской конфигурации Slim Select подставляет значения по умолчанию.

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

Если объект settings не задан, система работает в режиме стандартной конфигурации:

  • включён поиск по списку опций
  • разрешён одиночный выбор
  • отображается стандартный placeholder
  • используется базовый рендеринг DOM
  • активна фильтрация строкового типа
  • отключены расширенные визуальные режимы

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

Основные параметры settings по умолчанию

searchPlaceholder

Поле searchPlaceholder определяет текст внутри строки поиска при открытом списке.

По умолчанию:

searchPlaceholder: 'Search'

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

placeholderText

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

По умолчанию значение берётся из HTML-атрибута <option> или устанавливается как пустая строка.

Логика:

  • если есть <option disabled selected> → используется его текст
  • если нет → отображается пустое значение

allowDeselect

Определяет возможность снятия выбранного значения.

По умолчанию:

allowDeselect: false

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

showSearch

Управляет отображением строки поиска внутри выпадающего списка.

По умолчанию:

showSearch: true

При большом количестве элементов поле поиска становится основным инструментом фильтрации. Если количество опций небольшое, интерфейс остаётся неизменным, но поле всё равно присутствует.

searchText

Текст, отображаемый при отсутствии совпадений в поиске.

По умолчанию:

searchText: 'No results'

Этот параметр влияет только на состояние пустого результата фильтрации и не связан с данными select-элемента.

focusSearch

Определяет автоматический фокус на поле поиска при открытии списка.

По умолчанию:

focusSearch: true

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

searchHighlight

Включает визуальное выделение совпадений в списке опций.

По умолчанию:

searchHighlight: false

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

closeOnSelect

Определяет закрытие выпадающего списка после выбора элемента.

По умолчанию:

closeOnSelect: true

В одиночном режиме список закрывается сразу после выбора. Это стандартное поведение HTML <select>.

isMultiple

Флаг множественного выбора.

По умолчанию:

isMultiple: false

Значение вычисляется автоматически на основе атрибута <select multiple>. Если атрибут присутствует, Slim Select переключается в режим массива значений.

disabled

Контролирует общее состояние активности селекта.

По умолчанию:

disabled: false

Если HTML-элемент имеет атрибут disabled, компонент наследует это состояние и блокирует все взаимодействия.

Данные и их обработка

data

Slim Select использует массив данных для формирования списка опций. Если он не передан, данные извлекаются напрямую из DOM <option> элементов.

По умолчанию:

data: null

При отсутствии внешнего массива происходит автоматическая парсинг-инициализация:

  • считываются <option>
  • формируются внутренние объекты { text, value, selected, disabled }
  • создаётся синхронизированная структура состояния

value

Начальное значение выбора.

По умолчанию:

value: null

Если в HTML присутствует selected, оно становится исходным значением. При отсутствии выделенных элементов значение остаётся пустым.

Поведение поиска

searchFunction (внутренний алгоритм)

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

  • регистронезависимое сравнение строк
  • поиск подстроки
  • фильтрация массива опций в реальном времени

Логика не использует регулярные выражения по умолчанию, что снижает нагрузку на больших списках.

Интерфейсные параметры

showContent

Управляет отображением выбранного значения внутри основного поля.

По умолчанию:

showContent: true

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

contentPosition

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

По умолчанию:

contentPosition: 'relative'

Значение влияет на внутреннюю верстку и способ вставки DOM-узлов.

container

Контейнер, в котором создаётся интерфейс Slim Select.

По умолчанию используется:

container: document.body

Если селектор не ограничен, компонент добавляется в body, что обеспечивает корректную работу позиционирования dropdown.

Обработка состояния

state

Внутреннее состояние компонента включает:

  • выбранные значения
  • список опций
  • состояние открытия/закрытия
  • состояние поиска

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

open

Флаг открытия выпадающего списка.

По умолчанию:

open: false

Изменяется динамически при взаимодействии пользователя.

Взаимодействие с DOM

shouldOpen

Контроль открытия списка по клику.

По умолчанию:

shouldOpen: true

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

className

Базовый класс для корневого элемента.

По умолчанию:

className: ''

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

Тайминги и производительность

delay

Задержка обработки ввода в поиске.

По умолчанию:

delay: 0

Фильтрация выполняется синхронно, без debounce. Это обеспечивает мгновенную реакцию, но при больших объёмах данных может требовать оптимизации на уровне кастомной конфигурации.

Автоматическая инициализация

Slim Select может работать в режиме автоинициализации при подключении к существующему <select> элементу. В этом случае используется полный набор дефолтных параметров:

  • парсинг DOM
  • создание структуры data
  • применение базового UI
  • активация поиска
  • установка стандартного поведения выбора

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

Взаимодействие параметров по умолчанию

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

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

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

Оглавление