SxAutoComplete (自动完成)

  • Implemented

支持模糊搜索与实时建议的输入组件。

使用场景

  • 输入关键字并获取候选项
  • 需要搜索过滤的表单项
  • 提示用户可选值

约束说明

  • 当前仅支持本地集合过滤（Items）。
  • 失焦关闭有固定 200ms 延迟以确保点击候选项。

行为说明

  • 输入内容会在本地集合中进行大小写不敏感过滤。
  • OnOptionsSearch 在过滤后触发，携带结果列表。

API

Parameters

状态 参数名 类型 默认值 描述
Implemented Value string? "" 当前输入的文本值。
Implemented Items IEnumerable<TItem>? null 供搜索的数据集合。
Implemented ItemTextFunc Func<TItem, string>? null 获取展示文本的委托。
Implemented OptionTemplate RenderFragment<TItem>? null 自定义选项模板。
Implemented Label string? null 顶部标签文本。
Implemented FloatingLabel bool false 是否使用浮动标签。
Implemented Placeholder string? null 占位文案。
Implemented IconStart string? null 前置图标名。
Implemented IconEnd string? null 后置图标名。
Implemented Appearance SxInputAppearance Outline 视觉风格。
Implemented Autofocus bool false 自动聚焦。
Implemented AriaLabel string? null aria-label 文本。
Implemented Height string? null 下拉最大高度。
Implemented Width string? null 组件固定宽度。
Implemented MaximumOptions int 10 最大显示项数。
Implemented Id (继承) string? null 组件 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Not Implemented TabIndex (继承) int? null TabIndex（未应用）。
Not Implemented AccessKey (继承) string? null AccessKey（未应用）。
Implemented Disabled (继承) bool false 是否禁用。
Implemented Loading (继承) bool false 加载状态。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

Events

状态 事件名 类型 描述
Implemented ValueChanged EventCallback<string?> 输入值变更事件。
Implemented OnOptionsSearch EventCallback<OptionsSearchEventArgs<TItem>> 搜索触发事件。

示例

<SxAutoComplete Items="@_items" Placeholder="Search..." OnOptionsSearch="HandleSearch" />

@code {
    private readonly List<string> _items = new() { "Apple", "Banana", "Cherry" };
    private Task HandleSearch(OptionsSearchEventArgs<string> args) => Task.CompletedTask;
}
在 Playground 中打开 →