Progress Telerik UI for Blazor

Blazor自动完成

  • Blazor自动完成控件可以让你用应用程序控件的数据和想法替换或增强文本框的浏览器自动完成功能。
  • 该组件是最大的真正的原生Blazor组件套件的一部分- Telerik UI为Blazor设计,完全适合任何应用程序的需求。
  • Blazor UI套件还提供了专业设计的主题,支持开关的翻转,文档处理库,丰富的文档和演示,以帮助您立即开始。
Telerik UI的Blazor套件
Nasa, Visa,微软 福克斯,三星,IBM 世界银行集团,沃尔沃
  • 自动完成概述

    Blazor AutoComplete组件是一个文本框,在用户输入时提供提示列表供用户选择。用户可以编写自己的值或从下拉菜单中选择建议并填充输入。


    AutoComplete是一个功能强大、功能齐全的UI组件,可以绑定到数据,并提供多种内置功能,如过滤、本地化和键盘导航。自动完成外观可以通过使用模板或维度进行定制,并且可以在WebAssembly (WASM)和服务器端Blazor应用程序中使用。

    查看Blazor自动完成演示

    Telerik UI Blazor自动完成概述
  • Blazor自动完成数据绑定

    AutoComplete组件支持在Blazor应用程序中绑定到基本类型(例如int、字符串或其他数据类型的简单集合)或数据模型。


    用于Blazor数据绑定的Telerik UI
  • Blazor自动完成过滤和搜索

    Blazor AutoComplete组件使您能够通过其Filterable参数加速和简化用户的值搜索。这样控件将根据当前用户输入筛选可用的建议。


    自动完成提供了额外的参数来微调过滤和搜索:


    • MinLength -允许你控制过滤器列表出现的时间

    • FilterOperator -允许你定义过滤操作符,如“开始”,“包含”,“结束”等。

  • 使用模板自定义自动完成

    AutoComplete控件和它的项目呈现可以很容易地使用它提供的模板选项之一进行定制:


    • 头模板-使您可以在列表展开时在列表头部定义自定义内容

    • 项目模板-允许您自定义单个列表项的外观

    • 页脚模板-允许您在列表展开时在列表底部定义自定义内容


    Telerik UI Blazor自动完成模板
  • 自动完成自定义过滤

    AutoComplete是一个灵活的组件,它还允许自定义操作。您可以实现自定义(服务器)过滤,并通过OnRead事件动态设置数据源。

    Blazor自动完成过滤示例。

  • Blazor自动完成事件

    你有几个事件可用于捕获和处理AutoComplete组件中值的更改:


    • OnRead-在组件初始化和用户过滤时触发

    • ValueChanged-在用户选择改变时触发

    • OnChange-仅当用户按下Enter键或模糊输入时触发(例如,在组件外部单击)

    • 元素失去焦点时-当它失去焦点时触发的事件

    Telerik UI Blazor事件
  • 自动完成分组

    AutoComplete组件中的内置分组功能是通过GroupField参数启用的。它可以让用户轻松地浏览列表中的选项,并从每个类别中选择他们想要的最好的东西。

    检查Blazor自动完成分组功能

    Telerik UI Blazor自动完成-分组
  • Blazor自动完成表索引

    Blazor AutoComplete组件,就像所有其他Blazor输入组件的Telerik UI一样,由于HTML TabIndex属性,支持在组件之间切换的键盘导航。按Tab键通常会聚焦下一个可用的输入组件,这与使用标准HTML输入时用户习惯的方式相同。通过TabIndex设置,可以自定义该顺序。
  • 自动完成弹出设置

    使用Blazor Autocomplete组件,您可以从单个专用标记快速定制弹出窗口。弹出式设置允许您配置最小和最大尺寸以及已经存在的宽度,高度和类参数。

    打开和关闭方法允许您在不触发OnOpen/OnClose事件的情况下切换Blazor自动完成组件的UI弹出可见性。

  • 自动完成键盘导航和辅助功能

    与Blazor组件的所有其他Telerik UI一样,AutoComplete组件支持开箱即用的键盘导航和web可访问性标准实现标准(包括WCAG、Section 508和屏幕阅读器的WAI-ARIA属性)。这使得只需一个键盘就可以轻松地在AutoComplete中导航和选择值,以及通过辅助技术访问组件内容。

    在Blazor AutoComplete键盘导航演示中探索支持的键的完整列表

    Telerik UI for ASP。网络核心Accessibility
  • 自动完成全球化和本地化

    自动完成控件具有内置的本地化支持,这使得它很容易将文本翻译为您的Blazor应用程序可能需要的任何语言。


    Telerik UI的开拓者全球化和本地化
  • 自定义自动完成主题

    Telerik Blazor AutoComplete组件有几个内置的主题,如默认(我们自己的样式),材质(基于材质设计指南)和Bootstrap(看起来像Bootstrap样式,以便更好地集成)。


    属性可以轻松地自定义任何开箱即用的主题,或者使用属性创建新的主题来匹配颜色和品牌Telerik SASS ThemeBuilder应用程序

    Telerik UI的Blazor自动完成主题

所有Blazor组件

下一个步骤

发射演示

看看Telerik UI的Blazor在行动,并检查它可以做多少开箱即用。

下载免费试用

尝试Telerik UI Blazor与专门的技术支持。

Baidu
map