ComboBox для автодополнения

ComboBox — это компонент, который объединяет текстовое поле ввода с выпадающим списком, предоставляя пользователю возможность выбирать элементы из заранее определённого набора или вводить собственные значения. В контексте Carbon Components Svelte, ComboBox используется для реализации функционала автодополнения с поддержкой кастомизации и реактивного взаимодействия с данными.

Основные свойства ComboBox

  • items — массив объектов, представляющих элементы списка. Каждый объект обычно имеет поля id и text.

    let items = [
  { id: '1', text: 'Apple' },
  { id: '2', text: 'Banana' },
  { id: '3', text: 'Cherry' }
];

  • label — текстовая метка для поля ввода, отображается над ComboBox.

  • placeholder — подсказка внутри текстового поля.

  • selectedItem — объект, выбранный пользователем. Может быть реактивной переменной Svelte для двустороннего связывания.

  • typeAhead — включает режим автодополнения при вводе текста, автоматически фильтруя элементы списка.

Пример базового использования:

Фильтрация и автодополнение

Режим typeAhead автоматически фильтрует список элементов на основе введённого текста. Carbon Components Svelte использует чувствительное к регистру сравнение по умолчанию, но можно реализовать собственную функцию фильтрации через событие input:

Множественный выбор (MultiSelect)

ComboBox поддерживает множественный выбор через свойство multi и массив для selectedItems. В этом режиме пользователь может выбирать сразу несколько элементов, а компонент корректно отображает их в виде списка тегов внутри поля ввода.

Настройка внешнего вида и пользовательского интерфейса

ComboBox поддерживает разнообразные стилизации через свойства Carbon:

  • light — светлая тема для темного фона.
  • disabled — блокировка поля.
  • size — настройка размера поля (например, 'sm', 'md', 'lg').

Также можно использовать слоты для кастомного рендеринга элементов списка:


  
    

      {item.text}

Работа с событиями

ComboBox генерирует несколько событий для управления взаимодействием:

  • on:change — срабатывает при выборе элемента.
  • on:input — срабатывает при вводе текста, полезно для кастомной фильтрации.
  • on:blur — при потере фокуса.
  • on:focus — при фокусировке на поле ввода.

Пример обработки события выбора:

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

Для динамических списков, где данные загружаются с сервера, можно изменять массив items на лету и использовать input событие для отправки запросов к API:

Ключевые рекомендации при использовании ComboBox

  • Использовать typeAhead для больших списков, чтобы не перегружать интерфейс.
  • Для множественного выбора обязательно связывать массив selectedItems.
  • Реализовать собственную функцию фильтрации при необходимости чувствительности к регистру или поддержке частичных совпадений.
  • Асинхронная загрузка элементов должна быть дебаунсирована, чтобы уменьшить количество сетевых запросов.
  • Стилизация через слоты позволяет интегрировать ComboBox в кастомные интерфейсы без нарушения UX Carbon.
Оглавление