自动完成

安装

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @lumi-ui/autocomplete
Copy

组件结构

Copy<Autocomplete>
  <AutocompleteInputGroupContent />
  <AutocompleteValue />
  <AutocompleteContent>
    <AutocompleteStatus />
    <AutocompleteEmpty />
    <AutocompleteList>
      <AutocompleteRow>
        <AutocompleteItem />
      </AutocompleteRow>
      <AutocompleteSeparator />
      <AutocompleteGroup>
        <AutocompleteGroupLabel />
      </AutocompleteGroup>
      <AutocompleteCollection />
    </AutocompleteList>
  </AutocompleteContent>
</Autocomplete>

实用示例

异步加载

在用户输入时异步加载选项，并渲染自定义的状态内容。

内联补全

通过 mode 属性，让用户使用方向键导航时，将高亮项自动填充到输入框中。可接受 aria-autocomplete 的取值：list、both、inline 或 none。

分组

使用 <AutocompleteGroup> 和 <AutocompleteGroupLabel> 在弹窗内添加分区标题，将相关选项组织在一起。

分组数据由一个对象数组表示，每个对象包含 items 属性（即该组的选项数组）。你可以额外提供一个字段（例如 value）作为分组标签的标题文本。

模糊匹配

即便查询内容与选项文本并不完全匹配，模糊匹配也能帮你找到相关结果。

限制结果数量

通过 limit 属性限制可见选项的数量，并使用 <AutocompleteStatus> 引导用户优化查询条件。

自动高亮

在 <Autocomplete> 上设置 autoHighlight 属性，用户输入时第一个匹配项会被自动高亮。如果希望高亮始终存在（例如列表内嵌在对话框中时），可将该属性的值设为 always。

这个属性可以和 keepHighlight、highlightItemOnHover 组合使用，以配置鼠标交互时高亮的行为方式。

网格布局

通过将每一行用 <AutocompleteRow> 包裹，可以让选项以网格布局展示。

表单集成

在表单中使用自动完成。

API 参考

AutocompleteInputGroupContent

一个复合组件，将 AutocompleteInput、Icon、AutocompleteClear 和 AutocompleteTrigger 整合为一个带样式的单一元素。

AutocompleteContent

一个复合组件，将 AutocompletePortal、AutocompletePositioner 和 AutocompletePopup 整合为一个带样式的下拉内容元素。