Загрузить svelte typeahead - Загрузка исходного кода svelte typeahead

svelte typeahead

Другой исходный код

v4.4.2

Скачать

стройный шрифт вперед

Доступный компонент нечеткого поиска с опережением ввода.

Этот компонент использует облегченную нечеткую библиотеку для нечеткого поиска на стороне клиента и следует рекомендациям WAI-ARIA.

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

Установка

 # npm
npm i svelte-typeahead

# pnpm
pnpm i svelte-typeahead

# Yarn
yarn add svelte-typeahead

# Bun
bun add svelte-typeahead

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

Базовый

Передайте массив объектов в data prop. Используйте свойство extract , чтобы указать значение для поиска.

< script >
  import Typeahead from " svelte-typeahead " ;

  const data = [
    { state : " California " },
    { state : " North Carolina " },
    { state : " North Dakota " },
    { state : " South Carolina " },
    { state : " South Dakota " },
    { state : " Michigan " },
    { state : " Tennessee " },
    { state : " Nevada " },
    { state : " New Hampshire " },
    { state : " New Jersey " },
  ];

  const extract = ( item ) => item . state ;
</ script >

< Typeahead { data } { extract } />

Пользовательская этикетка

$$restProps пересылаются в svelte-search.

Используйте свойство label , чтобы указать собственную метку.

< Typeahead label = "U.S. States" { data } { extract } />

Скрытый ярлык

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

Рекомендуется установить label (даже если она скрыта) для обеспечения доступности.

< Typeahead label = "U.S. States" hideLabel { data } { extract } />

Результаты в индивидуальном стиле

Этот компонент использует нечеткую библиотеку для выделения совпадающих символов с элементом метки.

Используйте слот по умолчанию для отображения пользовательских результатов.

< Typeahead { data } { extract } let:result let:index >
  < strong >{ @html result . string }</ strong >
  { index }
</ Typeahead >

Нет результатов

Используйте слот «нет результатов» для отображения сообщения, если значение поиска не дает результатов.

< Typeahead value = "abcd" { data } { extract } let:value >
  < svelte:fragment slot = " no-results " >
    No results found for "{ value }"
  </ svelte:fragment >
</ Typeahead >

Ограничить количество результатов

Используйте параметр limit , чтобы указать максимальное количество отображаемых результатов. По умолчанию — Infinity .

< Typeahead limit ={ 2 } { data } { extract } />

Отключенные элементы

Отключите элементы, используя фильтр disable . Отключенные элементы нельзя выбирать или перемещать с помощью клавиатуры.

В следующем примере отключены элементы со значением state , содержащим «Каролина».

< Typeahead
  { data }
  value = " ca "
  extract ={( item ) => item . state }
  disable ={( item ) => / Carolina / . test ( item . state )}
/>

Фокус после выбора

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

< Typeahead focusAfterSelect { data } { extract } />

Показать раскрывающийся список в фокусе

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

Установите для showDropdownOnFocus значение true , чтобы раскрывающийся список отображался только тогда, когда ввод поиска находится в фокусе.

< Typeahead value = "ca" showDropdownOnFocus { data } { extract } />

Показать все результаты по фокусу

По умолчанию результаты не отображаются, если в фокусе находится пустой ввод (т. е. value="" ).

Установите для showAllResultsOnFocus значение true , чтобы все результаты отображались, когда в фокусе находится пустой ввод.

< Typeahead showAllResultsOnFocus { data } { extract } />

Стиль

Примечание. Этот компонент имеет минималистичный дизайн. Вы можете настроить таргетинг на компонент, используя селектор [data-svelte-typeahead] .

 : global ([ data-svelte-typeahead ]) {
  margin : 1 rem ;
}

API

Реквизит

Имя	Тип	Значение по умолчанию	Описание
ценить	`string`	`""`	Введите значение поиска.
данные	`TItem[]`	`[]`	Предметы для поиска.
извлекать	`(TItem) => any`	`(item) => item`	Назначьте значение, если `TItem` является объектом.
запрещать	`(TItem) => boolean`	`(item) => false`	Отключенные элементы отображаются в результатах, но их нельзя выбрать.
фильтр	`(TItem) => boolean`	`(item) => false`	Отфильтрованные элементы не будут отображаться в результатах.
автоматический выбор	`boolean`	`true`	Следует ли автоматически выбирать первый результат.
инпутафтеселект	`"update" \| "clear" \| "keep"`	`"update"`	Установите значение `"clear"` , чтобы очистить `value` после выбора результата. Установите значение `"keep"` , чтобы поле поиска оставалось неизменным после выбора.
результаты	`FuzzyResult[]`	`[]`	Необработанные нечеткие результаты из модуля нечетких
фокус после выбора	`boolean`	`false`	Установите значение `true` , чтобы перефокусировать ввод после выбора результата.
показатьDropdownOnFocus	`boolean`	`false`	Установите значение `true` , чтобы результаты отображались только тогда, когда ввод сфокусирован.
показатьAllResultsOnFocus	`boolean`	`false`	Установите значение `true` , чтобы все результаты отображались, когда в фокусе находится пустой ввод.
предел	`number`	`Infinity`	Укажите максимальное количество результатов для отображения.
`...$$restProps`	(перенаправлено в `svelte-search` )	Н/Д	Все остальные реквизиты передаются элементу ввода.

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

on:select : отправляется при выборе результата
on:clear : отправляется при очистке поля ввода

< script >
  import Typeahead from " svelte-typeahead " ;

  let e = [];
</ script >

< Typeahead
  { data }
  { extract }
  on:select ={({ detail }) => ( e = [ ... e , { event: " select " , detail }])}
  on:clear ={() => ( e = [ ... e , { event: " clear " }])}
/>

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