logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

AutoComplete自动完成

输入框自动完成功能。

何时使用

  • 需要一个输入框而不是选择器。
  • 需要输入建议/辅助提示。

和 Select 的区别是:

  • AutoComplete 是一个带提示的文本输入框,用户可以自由输入,关键词是辅助输入
  • Select 是在限定的可选项中进行选择,关键词是选择

Examples

基本使用,通过 options 设置自动完成的数据源。

expand code expand code

Value 类型为 object 时使用 compareWith.

expand code expand code

使用过滤表达式过滤内容

expand code expand code

查询模式: 不确定类目 示例。

注意:如果自己维护Options值时,请设置AllowFilter="false",避免造成筛选冲突

expand code expand code

修复滚动区域的浮层移动问题。

expand code expand code

通过格式化表达式格式化选项

expand code expand code

自定义输入组件。

expand code expand code

演示控件的性能

expand code expand code

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 属性显示选项下拉列表 Boolean false
ValidationMessages FormItem 的验证消息 String[] --
AdditionalAttributes 属性获取或设置将应用于所创建元素的附加属性的集合。 IReadOnlyDictionary<String, Object> --
Value 属性获取或设置输入的值。这应该与双向绑定一起使用。 String --
ValueChanged 属性更新绑定值的回调。 EventCallback<String> --
ValueExpression 属性标识绑定值的表达式。 Expression<Func<String>> --
ValuesExpression 属性标识可枚举绑定值的表达式。 Expression<Func<IEnumerable<String>>> --
Size 属性输入框的大小。注意:在表单的上下文中,使用“大”尺寸。可用:`大``默认``小` String AntSizeLDSType.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 如果覆盖需要重新定位,则文档边界是用于计算的边界。因此,即使覆盖在视口之外,只要不“溢出”文档边界,覆盖仍可能显示。
Steps步骤条 Cascader级联选择
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.