Ant Design Blazor
AutoComplete自动完成
输入框自动完成功能。
何时使用
- 需要一个输入框而不是选择器。
- 需要输入建议/辅助提示。
和 Select 的区别是：
- AutoComplete 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助输入。
- Select 是在限定的可选项中进行选择，关键词是选择。
Examples
基本使用，通过 options 设置自动完成的数据源。
通过格式化表达式格式化选项
如果希望预先加载可选项并使用内部过滤，需设置 AllowFilter=true，设置 FilterExpression 可修改过滤逻辑。
查询模式: 不确定类目 示例。
注意：如果自己维护Options值时，请设置AllowFilter="false"，避免造成筛选冲突
修复滚动区域的浮层移动问题。
当 Value 类型为 object 时使用 compareWith.
自定义输入组件。
演示控件的性能
AutoComplete API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Placeholder | 属性输入元素占位符 | String | -- |
| Disabled | 属性停用 | Boolean | -- |
| DefaultActiveFirstOption | 属性默认情况下是否启用第一个选项 | Boolean | true |
| Backfill | 属性使用键盘选择项目时将所选项目回填到输入中 | Boolean | false |
| DebounceMilliseconds | 属性延迟 KeyUp 事件的处理，直到用户停止键入一段预定的时间 | Int32 | 250 |
| Options | 属性在下拉列表中显示的选项 | IEnumerable<TOption> | -- |
| OptionDataItems | 属性绑定列表数据项格式的数据源 | IEnumerable<AutoCompleteDataItem<TOption>> | -- |
| OnSelectionChange | 属性选择更改时执行的回调 | EventCallback<AutoCompleteOption> | -- |
| OnActiveChange | 属性活动项更改时执行的回调 | EventCallback<AutoCompleteOption> | -- |
| OnInput | 属性输入改变时执行的回调 | EventCallback<ChangeEventArgs> | -- |
| OnPanelVisibleChange | 属性面板可见性改变时执行的回调 | EventCallback<Boolean> | -- |
| ChildContent | 属性下拉内容 | RenderFragment | -- |
| OptionTemplate | 属性选项模板 | RenderFragment<AutoCompleteDataItem<TOption>> | -- |
| OptionFormat | 属性格式选项，可以自定义显示格式 | Func<AutoCompleteDataItem<TOption>, String> | -- |
| OverlayTemplate | 属性所有选项模板 | RenderFragment | -- |
| CompareWith | 属性对比，用来比较两个对象是否相同 | Func<Object, Object, Boolean> | -- |
| FilterExpression | 属性过滤表达式 | Func<AutoCompleteDataItem<TOption>, String, Boolean> | -- |
| AllowFilter | 属性允许过滤 | Boolean | false |
| Width | 属性输入的宽度，给定 int 时的像素，给定字符串时赋予 CSS width 属性的完整值 | OneOf<Int32?, String> | -- |
| OverlayClassName | 属性传递给覆盖的类名 | String | -- |
| OverlayStyle | 属性传递给叠加层的样式 | String | -- |
| PopupContainerSelector | 属性弹出窗口的容器选择器 | String | body |
| SelectedItem | 属性从下拉列表中选择的项目 | AutoCompleteOption | -- |
| BoundaryAdjustMode | 属性叠加调整策略（例如，当浏览器调整大小时发生）。查看 | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
| ShowPanel | 属性显示选项下拉列表This property is useless, please remove it. Obsolete 将在未来的版本中删除。 |
Boolean | false |
| ValidationMessages | FormItem 的验证消息 | String[] | -- |
| AdditionalAttributes | 属性获取或设置将应用于所创建元素的附加属性的集合。 | IReadOnlyDictionary<String, Object> | -- |
| Value | 属性获取或设置输入的值。这应该与双向绑定一起使用。 | String | -- |
| ValueChanged | 属性更新绑定值的回调。 | EventCallback<String> | -- |
| ValueExpression | 属性标识绑定值的表达式。 | Expression<Func<String>> | -- |
| ValuesExpression | 属性标识可枚举绑定值的表达式。 | Expression<Func<IEnumerable<String>>> | -- |
| Size | 属性The size of the input box. Note: in the context of a form, `InputSize.Large` is used. Available: `InputSize.Large` `InputSize.Default` `InputSize.Small` | InputSize | InputSize.Default |
| CultureInfo | 属性将字符串转换为值和将值转换为字符串时将使用什么文化对 InputNumber 组件有用。 | CultureInfo | CultureInfo.CurrentCulture |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
AutoCompleteOption API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性选项的标签。优先于标签 | RenderFragment | -- |
| Value | 属性期权的价值 | Object | -- |
| Label | 属性选项标签 | String | Value.ToString() |
| Disabled | 属性选项是否被禁用 | Boolean | false |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
TriggerBoundaryAdjustMode API#
基础类型: Int32
| 名称 | 描述 |
|---|---|
| None | 不要自动调整 |
| InView | 默认情况下，视口边界是在覆盖完全可见时用于计算的边界。尝试调整叠加层，使其始终在视口中完全可见。因此，如果叠加层位于视口之外（“溢出”），则会尝试重新定位计算。 |
| InScroll | 如果覆盖需要重新定位，则文档边界是用于计算的边界。因此，即使覆盖在视口之外，只要不“溢出”文档边界，覆盖仍可能显示。 |