svelte search

洗練された検索

アクセス可能でカスタマイズ可能な 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イベントを使用して、「Enter」を押したときの値を取得します。

< 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 prop をバインドして、プログラム的に入力に焦点を当てます。

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

  let ref = null ;
</ script >

< Search bind:ref />

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

デバウンスされた入力

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
ID	string	"search" + Math.random().toString(36)
フォームアリア属性の削除	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 " );
  }}
/>

変更履歴

変更履歴

ライセンス

マサチューセッツ工科大学