组件/自动完成

Blazor自动完成概述

的Blazor自动完成组件是在用户输入时提供提示的文本框。这些建议可以是过滤后的当用户输入时。用户可以编写自己的值，或者从下拉菜单中单击一个建议来选择它并填充输入。您可以通过控制建议列表数据绑定，各种外观设置喜欢维而且模板．

为Blazor Ninja图像的Telerik UI

自动完成组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

创建自动完成

  1. 使用TelerikAutoComplete标记将组件添加到剃须刀页面。

  2. 填充数据属性中要出现在下拉列表中的项的集合。

  3. 绑定组件的值的成员添加到相同的类型ValueField参数。

  4. (可选)启用占位符文本和清晰的按钮．

使用双向值绑定和数据绑定到原语类型的自动完成

@*自动完成双向值绑定和数据绑定到基元类型*@用户输入:@ thevalue 
  @code{//当前值为空(没有选择项)，允许显示占位符。string TheValue {get;设置;}列表建议{get;设置;} = new List {"Manager"， "Developer"， "QA"， "Technical Writer"， "Support Engineer"， "Sales Agent"， "Architect"， "Designer"};｝

如果您想为下拉列表中的项而不是它们的文本获取值标识符，请考虑组合框组件．的自动完成是一个自由文本输入接受用户写入的任何文本，而不仅仅是下拉框中的建议。因此,价值的自动完成总是一个字符串，而ComboBox可以为您提供一个数量或者一个Guid，不仅是字符串．

数据绑定

Blazor AutoComplete需要一个数据源，以便用数据填充下拉列表。要提供数据源，请使用数据财产。阅读更多关于Blazor AutoComplete数据绑定…

过滤

Blazor的自动完成功能有一个内置的过滤器，可以根据最终用户的类型缩小显示的建议范围。要配置此特性，请使用滤过性的参数。此外，您可以在不同的筛选操作符之间进行选择，并配置有多少个符号之后将显示建议列表。阅读更多关于Blazor自动完成过滤器…

分组

Blazor的自动完成功能使您能够将列出的建议分组到类别中，从而帮助终端用户在较长的列表中更快地浏览。阅读更多关于Blazor自动完成分组…

模板

您可以使用内置模板的功能，并自定义组件的默认呈现。阅读更多关于Blazor自动完成模板…

验证

您可以通过使用内置验证来确保组件值是可接受的。阅读更多关于输入验证的信息…．

虚拟化

通过虚拟化下拉列表中的元素，您可以使用巨大的数据源而不会出现性能问题。UI虚拟化同时适用于本地和远程数据。阅读更多关于Blazor自动完成虚拟化…

自适应呈现

该组件根据屏幕大小支持不同的弹出呈现。阅读更多关于自适应渲染功能和如何启用它…

参数

Blazor自动完成提供了各种参数，允许您配置组件:

参数 类型 描述
AdaptiveMode AdaptiveMode
（没有一个）		 的自适应模式分量的。
数据 IEnumerable < TItem > 允许您提供数据源。必需的。
DebounceDelay int
150		 最后键入的符号与内部符号之间的时间(以毫秒为单位)oninput事件触发。应用于用户输入和筛选时。使用它来平衡客户端性能和数据库查询的数量。
启用 保龄球 组件是否启用。
滤过性的 保龄球 是否过滤为最终用户启用(建议将在用户输入时缩小范围)。
FilterOperator StringFilterOperator
（StartsWith）		 将用于的字符串操作过滤．
Id 字符串 渲染为id属性。<输入/ >元素，所以你可以附加一个<标签= " " >对输入。
TItem 类型 组件绑定到的模型的类型。如果你不能提供数据或价值．确定引用对象的类型。
标题 字符串 在弹出窗口(动作表单)的头部呈现的标题文本。只适用于AdaptiveMode设置为汽车．
价值而且bind-Value 字符串 获取/设置组件的值，可用于绑定。使用@bind-Value用于双向绑定的语法，例如，绑定到您自己的变量。的价值一定是字符串．
ValueField 字符串
（价值）		 将作为提示显示给用户的模型中的字段的名称。绑定到简单字符串列表时不需要。
TabIndex int ? 映射到tabindexHTML元素的属性。控件的焦点，您可以使用它自定义表单中的输入的焦点顺序选项卡关键。
ClearButton 保龄球 用户是否可以通过输入上的按钮来清除所选值。单击它时，将价值将更新为字符串。空．
启用 保龄球 使用这个布尔属性来呈现禁用的Blazor AutoComplete组件，直到满足某些要求。
最小长度 int 在建议列表出现之前，文本必须有多少个字符。不能0．经常与过滤．
占位符 字符串 当输入中没有文本时，用户将其视为提示的文本。为了展示它，价值参数应该设置为字符串的默认值(零）.

造型和外观

以下参数使您能够自定义Blazor AutoComplete的外观:

参数 类型 描述
类 字符串 将在组件的主包装元素上呈现的CSS类。用它来覆盖主题或应用自定义样式．
宽度 字符串 组件的宽度。如果下拉菜单没有特定的宽度设置，它将同时瞄准下拉菜单和主元素。默认的宽度值为空，但主题适用100％．使用宽度属性或自定义CSS来设置另一个值在任何支援单位．

中的自定义“自动完成”样式的更多选项外观的文章．

组件的弹出窗口可以通过嵌套标签进行定制:

     . /

自动完成提供了以下弹出设置:

参数 类型 描述
AnimationDuration int 弹出窗口的动画持续时间，以毫秒为单位。
类 字符串 额外的CSS类自定义弹出窗口的外观。
高度 字符串 弹出窗口的高度。
MinHeight 字符串 弹出窗口的最小高度。
MinWidth 字符串 弹出窗口的最小宽度。
MaxHeight 字符串 弹出窗口的最大高度。
MaxWidth 字符串 弹出窗口的最大宽度。
宽度 字符串 弹出窗口的宽度。如果你不指定一个值，下拉菜单的宽度将匹配锚元素的宽度，这可以帮助响应式布局和100%宽度。

如果您正在从描述下拉项的视图模型中寻找更多字段，而不仅仅是价值，请参阅从下拉菜单中获取模型知识库文章和OnChange事件。

你也可以回顾/加入讨论并为这个请求投票:绑定DropDownList值到复杂模型

自动完成引用和方法

AutoComplete是一个泛型组件，它的类型由用作数据源的模型的类型决定。你可以在数据绑定-注意事项篇文章。

类向组件实例添加引用以使用自动完成的方法．

方法 描述
关闭 关闭弹出窗口。
FocusAsync 聚焦组件的主要元素。总是等待这个调用，正如它所依赖的JSInterop．
开放 打开弹出窗口。 
 打开Popup @code {private TelerikAutoComplete AutoCompleteRef {get;设置;}私有字符串AutoCompleteValue {get;设置;} private List建议{get;设置;} = new List {"first"， "second"， "third"};private void OpenPopup() {AutoCompleteRef.Open();}}

下一个步骤

另请参阅

在本文中
相关文章
找不到你需要的帮助? 改进本文
Baidu
map