Метод setData

Работа с динамическими списками в Slim Sel ect часто требует полного переопределения набора данных, особенно в случаях, когда источник опций загружается асинхронно или изменяется в зависимости от состояния интерфейса. Для этих целей используется метод setData, обеспечивающий программную замену текущих опций без необходимости пересоздания экземпляра компонента.

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

Ключевая особенность заключается в том, что метод:

  • перезаписывает существующие опции;
  • сохраняет состояние экземпляра компонента;
  • автоматически обновляет отображение интерфейса;
  • не требует повторной инициализации Slim Select.

Это делает его основным инструментом при работе с динамическими источниками данных.

Сигнатура и структура данных

Типичная сигнатура метода:

select.setData(data);

где data — массив объектов строго определённой структуры:

[
  { text: "Текст опции", value: "значение", selected: false, disabled: false },
  { text: "Опция 2", value: "2" }
]

Поля объекта данных

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

value Значение, которое будет передано в <select> при выборе.

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

disabled Отключает возможность выбора конкретной опции.

Базовое использование setData

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

import SlimSelect fr om 'slim-select'

const select = new SlimSelect({
  select: '#example'
})

select.setData([
  { text: 'JavaScript', value: 'js' },
  { text: 'TypeScript', value: 'ts' },
  { text: 'Python', value: 'py' }
])

После вызова метода список опций полностью заменяется новым набором.

Полная замена данных

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

Пример:

select.setData([
  { text: 'HTML', value: 'html' },
  { text: 'CSS', value: 'css' }
])

Если ранее были выбраны значения, они сбрасываются, если новые данные не содержат совпадений.

Сохранение выбранного значения

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

select.setData([
  { text: 'Node.js', value: 'node' },
  { text: 'Deno', value: 'deno', selected: true },
  { text: 'Bun', value: 'bun' }
])

В этом случае после обновления данных автоматически установится выбранное значение deno.

Асинхронная загрузка данных

Метод часто используется при загрузке данных с сервера:

fetch('/api/languages')
  .then(res => res.json())
  .then(data => {
    select.setData(
      data.map(item => ({
        text: item.name,
        value: item.id
      }))
    )
  })

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

Обновление данных по событию

Частый сценарий — изменение списка в зависимости от другого поля формы:

document.querySelector('#category').addEventListener('change', (e) => {
  const category = e.target.value

  if (category === 'frontend') {
    select.setData([
      { text: 'React', value: 'react' },
      { text: 'Vue', value: 'vue' },
      { text: 'Angular', value: 'angular' }
    ])
  }

  if (category === 'backend') {
    select.setData([
      { text: 'Node.js', value: 'node' },
      { text: 'Django', value: 'django' },
      { text: 'Go', value: 'go' }
    ])
  }
})

В этом сценарии setData используется как механизм реактивного обновления UI.

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

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

select.setData([])

Результат:

  • список опций становится пустым;
  • текущий выбор сбрасывается;
  • интерфейс отображает состояние “нет данных”.

Это часто используется при фильтрации или отсутствии результатов поиска.

Влияние на выбранное значение

При вызове setData происходит переоценка текущего значения <select>:

  • если текущее значение присутствует в новом наборе — оно сохраняется;
  • если отсутствует — выбор сбрасывается;
  • если указано selected: true — оно переопределяет текущее состояние.

Пример конфликта:

select.setData([
  { text: 'A', value: 'a' },
  { text: 'B', value: 'b' }
])

Если ранее было выбрано значение c, оно будет удалено как несуществующее.

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

При использовании режима multiple структура данных остаётся идентичной:

const select = new SlimSelect({
  select: '#multi',
  settings: {
    multiple: true
  }
})

select.setData([
  { text: 'Red', value: 'red' },
  { text: 'Green', value: 'green', selected: true },
  { text: 'Blue', value: 'blue', selected: true }
])

В этом случае возможно указание нескольких выбранных значений одновременно.

Частичное обновление через setData

Метод не поддерживает прямое частичное обновление, однако его можно имитировать:

const current = select.getData()

select.setData([
  ...current,
  { text: 'New option', value: 'new' }
])

Такой подход позволяет расширять список без полной потери данных.

Очистка и переинициализация состояния

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

select.setData([])
select.setData(newData)

Это гарантирует отсутствие “залипших” значений в интерфейсе.

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

Важно понимать, что setData работает на уровне внутреннего состояния компонента Slim Select, а не напрямую через изменение DOM-узла.

Однако после вызова метода:

  • DOM <option> элементы пересоздаются;
  • синхронизация с value обновляется автоматически;
  • событие изменения может быть сгенерировано в зависимости от конфигурации.

Ошибки и ограничения

Типичные ошибки при использовании:

Некорректная структура данных

select.setData([
  { label: 'A' }
])

Ошибка: отсутствует обязательное поле text или value.

Передача не массива

select.setData({ text: 'A', value: 'a' })

Метод ожидает массив, одиночный объект приводит к некорректному состоянию.

Потеря выбранного состояния

При частом вызове без сохранения selected возможен сброс пользовательского выбора.

Производительность

Метод оптимизирован для быстрого пересоздания небольших и средних списков.

Однако при больших объемах данных:

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

Практика использования в архитектуре приложений

В реальных приложениях setData часто интегрируется в:

  • архитектуру Flux / Redux (обновление через стор);
  • реактивные фреймворки;
  • кастомные системы управления формами;
  • AJAX-зависимые интерфейсы.

Типовой поток данных:

  1. событие UI;
  2. запрос к API;
  3. трансформация данных;
  4. вызов setData;
  5. обновление интерфейса Slim Select.

Использование с фильтрацией

Пример локальной фильтрации:

const allOptions = [
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Orange', value: 'orange' }
]

function filter(query) {
  const filtered = allOptions.filter(item =>
    item.text.toLowerCase().includes(query.toLowerCase())
  )

  select.setData(filtered)
}

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

Итоговая модель поведения метода

Метод setData в контексте Slim Select можно рассматривать как:

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