svelte search

svelte-поиск

Доступный, настраиваемый компонент поиска Svelte.

Этот компонент поиска состоит из семантической form и элементов input .

См. svelte-typeahead для компонента поиска с раскрывающимися результатами.

Попробуйте это в Svelte REPL.

---

Установка

 # npm
npm i svelte-search

# pnpm
pnpm i svelte-search

# Yarn
yarn add svelte-search

# Bun
bun add svelte-search

Стиль

Этот компонент не имеет стиля. Выберите компонент с помощью селектора [data-svelte-search] .

 : global ([ data-svelte-search ] input ) {
  width : 100 % ;
  font-size : 1 rem ;
  padding : 0.5 rem ;
  margin : 0.5 rem 0 ;
  border : 1 px solid # e0e0e0 ;
  border-radius : 0.25 rem ;
}

Использование

Двусторонняя привязка

< script >
  import Search from " svelte-search " ;

  let value = " " ;
</ script >

< Search bind:value />

{ #if value }
  < button on:click ={() => ( value = " " )}>Clear "{ value }"</ button >
{ /if }

вкл.: отправить

input элемент содержится в form . Используйте перенаправленное событие submit , чтобы получить значение при нажатии «Ввод».

< Search bind:value on:submit ={() => console . log ( " submit " , value )} />

Метка с текстом-заполнителем

$$restProps пересылаются элементу ввода.

< Search label = " My label " placeholder = " Placeholder text... " />

Слот для этикетки

< Search >
  < span slot = " label " style = " color: red; " >Custom label</ span >
</ Search >

Визуально скрытая этикетка

Установите для hideLabel значение true , чтобы визуально скрыть метку.

< Search hideLabel label = " My label " placeholder = " Placeholder text... " />

Фокус (декларативный)

Используйте функцию autofocus , чтобы декларативно сфокусировать ввод.

< Search autofocus />

Фокус (программный)

Привяжите опору ref , чтобы программно сфокусировать ввод.

< script >
  import Search from " svelte-search " ;

  let ref = null ;
</ script >

< Search bind:ref />

< button on:click ={() => ref . focus ()}>Focus</ button >

Устраненный ввод

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

< script >
  import Search from " svelte-search " ;

  let events = [];
</ script >

< Search
  debounce ={ 800 }
  on:type ={({ detail : value }) => ( events = [ ... events , value ])}
/>

< pre >{ JSON . stringify ( events , null , 2 )}</ pre >

API

$$restProps пересылаются элементу ввода.

Реквизит

Имя реквизита	Тип	Значение по умолчанию
ценить	string	""
этикетка	string	"Search"
скрыть метку	boolean	false
отскакивать	number	0
ссылка	HTMLInputElement	null
идентификатор	string	"search" + Math.random().toString(36)
удалитьFormAriaAttributes	boolean	false
автофокус	boolean	false

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

• вкл:вход
• вкл.: изменить
• вкл.: отправить
• на: фокус
• вкл.: размытие
• вкл.:нажатие клавиши

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

• on:type : запускается при обновлении входного значения
• on:clear : срабатывает при нажатии кнопки «X», чтобы очистить введенное значение.

< Search
  on:type ={( e ) => {
    console . log ( " type " , e . detail ); // input value
  }}
  on:clear ={() => {
    console . log ( " clear " );
  }}
/>

Журнал изменений

Журнал изменений

Лицензия

Массачусетский технологический институт