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屬性。使用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`	是否自動選擇第一個結果。
選擇後輸入	`"update" \| "clear" \| "keep"`	`"update"`	設定為`"clear"`可在選擇結果後清除該`value` 。設定為`"keep"`可在選擇後保持搜尋欄位不變。
結果	`FuzzyResult[]`	`[]`	來自模糊模組的原始模糊結果
選擇後焦點	`boolean`	`false`	設定為`true`可在選擇結果後重新聚焦輸入。
顯示焦點下拉式選單	`boolean`	`false`	設定為`true`僅在輸入焦點時顯示結果。
顯示所有焦點結果	`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 >