Search для поиска по контенту

Компонент Search предназначен для организации поиска по контенту внутри приложения с использованием интерфейсных паттернов Carbon Design System. В Svelte его реализация обеспечивает реактивность, простоту интеграции и доступность.

Компонент импортируется из пакета:

import Search from 'carbon-components-svelte/lib/Search/Search.svelte';

Атрибуты и параметры

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

  • placeholder – строка с подсказкой внутри поля поиска.
  • labelText – текст метки для инпута, используемый для доступности.
  • value – реактивная переменная, которая хранит текущее значение поля поиска.
  • size – определяет размер компонента (sm, md, lg).
  • light – булево значение, включает светлую тему.
  • closeButtonLabel – текст для кнопки очистки поля.
  • disabled – блокировка поля для ввода.
  • on:input – событие, срабатывающее при вводе текста.
  • on:change – событие, срабатывающее при завершении изменения текста.

Пример базовой интеграции:

Работа с реактивностью

В Svelte Search полностью поддерживает биндинг через bind:value. Это позволяет автоматически обновлять переменные при вводе текста:

Вы ищете: {searchTerm}

Использование реактивных выражений позволяет фильтровать массив данных:






    
  {#each filteredItems as item}
    
  • {item}
    • 
  {/each}

События и обработчики

Компонент генерирует стандартные события Svelte. Самыми важными являются:

  • on:input — вызывается при каждом изменении текста, полезно для живого поиска.
  • on:change — вызывается при потере фокуса или подтверждении значения, удобен для отправки запросов на сервер.
  • on:clear — событие очистки поля, если необходимо сбросить фильтры или обновить интерфейс.

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

 console.log('Ввод:', e.detail.value)}
  on:clear={() => console.log('Поле очищено')}
/>

Кастомизация внешнего вида

  • size управляет размерами: sm — компактный, md — стандартный, lg — увеличенный.
  • light={true} переключает компонент в светлую тему для темных интерфейсов.
  • Внешние стили можно переопределять через CSS-переменные Carbon или глобальные классы .bx--search.

Пример применения стиля:

Поддержка доступности

  • labelText и placeholder используются для корректной работы скринридеров.
  • Кнопка очистки всегда имеет aria-label, соответствующий closeButtonLabel.
  • Компонент полностью клавиатурно доступен: TAB — переход к полю, ESC — очистка.

Интеграция с асинхронным поиском

Для реализации поиска по серверу можно использовать реактивный биндинг с debounce, чтобы избежать чрезмерного количества запросов:






    
  {#each results as item}
    
  • {item.name}
    • 
  {/each}

Использование с формами и валидация

Компонент можно интегрировать в формы Svelte с поддержкой валидации:

 console.log('Отправлено:', searchTerm)}>

Валидацию можно подключить через проверку значения перед отправкой или с помощью сторонних библиотек, например, svelte-forms-lib.

Оглавление