Blazor AutoComplete组件是一个文本框,在用户输入时提供提示列表供用户选择。用户可以编写自己的值或从下拉菜单中选择建议并填充输入。
AutoComplete是一个功能强大、功能齐全的UI组件,可以绑定到数据,并提供多种内置功能,如过滤、本地化和键盘导航。自动完成外观可以通过使用模板或维度进行定制,并且可以在WebAssembly (WASM)和服务器端Blazor应用程序中使用。
查看Blazor自动完成演示
Blazor AutoComplete组件使您能够通过其Filterable参数加速和简化用户的值搜索。这样控件将根据当前用户输入筛选可用的建议。
自动完成提供了额外的参数来微调过滤和搜索:
MinLength -允许你控制过滤器列表出现的时间
FilterOperator -允许你定义过滤操作符,如“开始”,“包含”,“结束”等。
AutoComplete控件和它的项目呈现可以很容易地使用它提供的模板选项之一进行定制:
头模板-使您可以在列表展开时在列表头部定义自定义内容
项目模板-允许您自定义单个列表项的外观
页脚模板-允许您在列表展开时在列表底部定义自定义内容
AutoComplete是一个灵活的组件,它还允许自定义操作。您可以实现自定义(服务器)过滤,并通过OnRead事件动态设置数据源。
你有几个事件可用于捕获和处理AutoComplete组件中值的更改:
OnRead-在组件初始化和用户过滤时触发
ValueChanged-在用户选择改变时触发
OnChange-仅当用户按下Enter键或模糊输入时触发(例如,在组件外部单击)
元素失去焦点时-当它失去焦点时触发的事件
使用Blazor Autocomplete组件,您可以从单个专用标记快速定制弹出窗口。弹出式设置允许您配置最小和最大尺寸以及已经存在的宽度,高度和类参数。
打开和关闭方法允许您在不触发OnOpen/OnClose事件的情况下切换Blazor自动完成组件的UI弹出可见性。
与Blazor组件的所有其他Telerik UI一样,AutoComplete组件支持开箱即用的键盘导航和web可访问性标准实现标准(包括WCAG、Section 508和屏幕阅读器的WAI-ARIA属性)。这使得只需一个键盘就可以轻松地在AutoComplete中导航和选择值,以及通过辅助技术访问组件内容。
在Blazor AutoComplete键盘导航演示中探索支持的键的完整列表
Telerik Blazor AutoComplete组件有几个内置的主题,如默认(我们自己的样式),材质(基于材质设计指南)和Bootstrap(看起来像Bootstrap样式,以便更好地集成)。
属性可以轻松地自定义任何开箱即用的主题,或者使用属性创建新的主题来匹配颜色和品牌Telerik SASS ThemeBuilder应用程序.