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屬性以程式方式聚焦輸入。

< 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 >

應用程式介面

$$restProps被轉送到輸入元素。

道具

道具名稱	類型	預設值
價值	string	""
標籤	string	"Search"
隱藏標籤	boolean	false
去抖	number	0
參考	HTMLInputElement	null
ID	string	"search" + Math.random().toString(36)
刪除FormAria屬性	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 " );
  }}
/>

變更日誌

變更日誌

執照

麻省理工學院