Работа с множественными значениями

В библиотеке Slim Select контроль количества выбранных элементов реализуется через конфигурационный параметр maxValuesShown и более важный механизм maxValues, который ограничивает число одновременно выбранных опций в режиме multiple. Такой подход позволяет управлять пользовательским вводом на уровне интерфейса без необходимости дополнительной валидации на стороне приложения.

Базовая настройка ограничения количества

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

new SlimSelect({
  select: '#multi-select',
  settings: {
    maxValues: 3
  }
});

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

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

При установленном ограничении Slim Select изменяет поведение списка опций:

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

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

Комбинация maxValues с multiple

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

<select id="multi-select" multiple>
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">JavaScript</option>
  <option value="4">TypeScript</option>
</select>
new SlimSelect({
  select: '#multi-select',
  settings: {
    maxValues: 2
  }
});

В одиночном режиме (single) параметр игнорируется, так как выбор всегда ограничен одним значением по определению.

Визуальное отображение выбранных элементов

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

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

Управление поведением при достижении лимита

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

Событие изменения

new SlimSelect({
  select: '#multi-select',
  settings: {
    maxValues: 3
  },
  events: {
    afterChange: (newVal) => {
      console.log('Текущие значения:', newVal);
    }
  }
});

Через afterChange можно отслеживать момент достижения лимита и реализовывать дополнительную логику, например:

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

Динамическое изменение лимита

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

const select = new SlimSelect({
  select: '#multi-select',
  settings: {
    maxValues: 2
  }
});

// изменение логики ограничения
select.destroy();

new SlimSelect({
  select: '#multi-select',
  settings: {
    maxValues: 5
  }
});

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

Ограничение и программная установка значений

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

const ss = new SlimSelect({
  select: '#multi-select',
  settings: {
    maxValues: 2
  }
});

ss.set(['1', '2', '3']);

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

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

Удаление выбранных элементов всегда имеет приоритет над ограничением. Даже при достижении maxValues пользователь может:

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

Это поведение предотвращает блокировку интерфейса и обеспечивает непрерывный цикл редактирования.

Интеграция с кастомной валидацией

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

new SlimSelect({
  select: '#multi-select',
  settings: {
    maxValues: 3
  },
  events: {
    afterChange: (values) => {
      const hasForbidden = values.some(v => v === 'admin');

      if (hasForbidden) {
        console.warn('Недопустимое значение выбрано');
      }
    }
  }
});

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

Ограничение и асинхронные данные

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

const ss = new SlimSelect({
  select: '#multi-select',
  settings: {
    maxValues: 4
  }
});

// позже обновление данных
ss.setData([
  { text: 'Node.js', value: 'node' },
  { text: 'React', value: 'react' }
]);

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

Особенности поведения при ошибочных конфигурациях

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

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

Совместимость с кастомным рендерингом

При использовании кастомных шаблонов отображения (searchText, addable, placeholder) ограничение maxValues не влияет на визуальную структуру, но продолжает управлять логикой выбора. Это важно при создании сложных UI-компонентов, где визуализация и состояние выбора разделены.

Поведение при фильтрации списка

При активной фильтрации доступных опций Slim Select учитывает лимит следующим образом:

  • отфильтрованные элементы по-прежнему подчиняются maxValues;
  • элементы, уже выбранные, не участвуют в фильтрации;
  • при достижении лимита фильтр не расширяет возможности выбора.

Это позволяет сохранить консистентность поведения даже при большом количестве опций.

Оглавление