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プロップに渡します。 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値に「Carolina」が含まれる項目が無効になります。
< 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 ;
}| 名前 | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| 価値 | string | "" | 検索値を入力します。 |
| データ | TItem[] | [] | 検索する項目。 |
| 抽出する | (TItem) => any | (item) => item | TItemがオブジェクトの場合、値をターゲットにします。 |
| 無効にする | (TItem) => boolean | (item) => false | 無効な項目は結果に表示されますが、選択できません。 |
| フィルター | (TItem) => boolean | (item) => false | フィルターで除外された項目は結果には表示されません。 |
| 自動選択 | boolean | true | 最初の結果を自動的に選択するかどうか。 |
| inputAfterSelect | "update" | "clear" | "keep" | "update" | 結果を選択した後にvalueをクリアするには、 "clear"に設定します。選択後に検索フィールドを変更しないようにするには、 "keep"に設定します。 |
| 結果 | FuzzyResult[] | [] | ファジー モジュールからの生のファジー結果 |
| フォーカス後選択 | boolean | false | 結果を選択した後に入力を再度フォーカスするにはtrueに設定します。 |
| showDropdownOnFocus | boolean | false | trueに設定すると、入力がフォーカスされている場合にのみ結果が表示されます。 |
| すべての結果を表示オンフォーカス | boolean | false | 空の入力がフォーカスされたときにすべての結果が表示されるようにするには、 trueに設定します。 |
| 限界 | number | Infinity | 表示する結果の最大数を指定します。 |
...$$restProps | ( svelte-searchに転送) | 該当なし | 他のすべてのプロパティは入力要素に転送されます。 |
< 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 >次のイベントは svelte-search コンポーネントに転送されます。
変更履歴
マサチューセッツ工科大学
