Объект настроек

В библиотеке Slim Select поведение и внешний вид компонента управляются через единый объект конфигурации. Он передаётся при создании экземпляра и определяет, как будет вести себя выпадающий список, как отображаются элементы, каким образом осуществляется поиск и взаимодействие с выбором.

Базовая форма инициализации выглядит следующим образом:

new SlimSelect({
  select: '#example-select',
  settings: {
    placeholderText: 'Выберите значение',
    allowDeselect: true
  }
})

Объект settings является центральной точкой настройки поведения компонента и включает набор параметров, влияющих на UX, логику поиска и визуальное представление.

Основные параметры отображения

placeholderText

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

settings: {
  placeholderText: 'Выберите категорию'
}

Ключевой момент заключается в том, что placeholderText применяется как для пустого состояния, так и для случаев, когда выбранное значение сброшено.

showSearch

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

settings: {
  showSearch: true
}

Возможные значения:

  • true — строка поиска отображается всегда
  • false — поиск скрыт

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

searchPlaceholder

Позволяет задать текст внутри поля поиска.

settings: {
  searchPlaceholder: 'Поиск...'
}

Используется в связке с showSearch. Не влияет на функциональность фильтрации, но улучшает визуальную ясность интерфейса.

searchHighlight

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

settings: {
  searchHighlight: true
}

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

Управление выбором

allowDeselect

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

settings: {
  allowDeselect: true
}

Если параметр включён, повторный клик по выбранному элементу снимает выбор. При значении false выбранное значение остаётся фиксированным до выбора другого элемента.

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

closeOnSelect

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

settings: {
  closeOnSelect: false
}

Возможные варианты:

  • true — список закрывается после выбора
  • false — список остаётся открытым для множественного выбора

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

Поведение при загрузке и пустых значениях

placeholderText и начальное состояние

При отсутствии выбранного значения Slim Select отображает placeholderText. Это состояние считается базовым и влияет на поведение интерфейса до первого взаимодействия пользователя.

settings: {
  placeholderText: 'Не выбрано'
}

Если в исходном <select> задан <option disabled selected>, placeholder может не отображаться, так как компонент считает, что значение уже установлено.

Настройки поиска и фильтрации

Логика фильтрации

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

Включение:

settings: {
  showSearch: true,
  searchHighlight: true
}

При этом:

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

Поведение при пустом поисковом запросе

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

Комбинирование параметров

Объект настроек позволяет формировать сложное поведение компонента за счёт комбинации параметров.

Пример конфигурации для формы с множественным выбором и поиском:

new SlimSelect({
  select: '#multi-select',
  settings: {
    placeholderText: 'Выберите элементы',
    showSearch: true,
    searchPlaceholder: 'Найти...',
    searchHighlight: true,
    closeOnSelect: false,
    allowDeselect: true
  }
})

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

Поведение при отключённых параметрах

Отключение поиска

settings: {
  showSearch: false
}

В этом случае:

  • строка поиска не рендерится
  • фильтрация недоступна
  • список всегда отображается полностью

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

Фиксированный выбор

settings: {
  allowDeselect: false
}

При этом:

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

Подобная конфигурация характерна для форм с обязательными параметрами.

Влияние настроек на поведение DOM

Объект settings не только управляет логикой, но и влияет на структуру DOM-элементов, создаваемых Slim Select:

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

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

Особенности применения конфигурации

Иммутабельность после инициализации

После создания экземпляра Slim Select объект settings не предназначен для динамического изменения напрямую. Изменения не применяются автоматически к уже инициализированному компоненту.

Типичный подход при необходимости изменения поведения:

const instance = new SlimSelect({
  select: '#example',
  settings: {
    showSearch: true
  }
})

// пересоздание при смене конфигурации
instance.destroy()

new SlimSelect({
  select: '#example',
  settings: {
    showSearch: false
  }
})

Приоритет настроек

Поведение компонента определяется в следующем порядке:

  1. HTML-разметка <select> и <option>
  2. Переданный объект settings
  3. Внутренние дефолтные значения библиотеки

Это важно при конфликте параметров, когда, например, HTML содержит disabled, а настройки предполагают активное состояние.

Типовые конфигурации объектов настроек

Минимальная конфигурация

settings: {
  placeholderText: 'Выбор'
}

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

Поисковый режим

settings: {
  showSearch: true,
  searchPlaceholder: 'Поиск значения'
}

Ориентирован на списки средней и большой длины.

Режим множественного выбора

settings: {
  showSearch: true,
  closeOnSelect: false,
  allowDeselect: true
}

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

Ограничения объекта настроек

Объект settings не является универсальным конфигуратором всей библиотеки. Он не управляет:

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

Его задача ограничена управлением UX и базовым поведением интерфейса выбора.

Оглавление