svelte typeahead

简洁的预输入

可访问的模糊搜索提前输入组件。

该组件使用轻量级模糊库进行客户端模糊搜索，并遵循 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 >

转发事件

以下事件将转发到 svelte-search 组件。

• 上：类型
• 开：输入
• 上：改变
• 上：焦点
• 开：清除
• 开：模糊
• 开：按下键

变更日志

变更日志

执照

麻省理工学院