Blazor 组件库 BootstrapBlazor 中AutoComplete组件介绍

AutoComplete组件介绍

AutoComplete组件和文本框基本上样子是一样的,只不过AutoComplete组件还带有一个下拉列表,可以从中选择对应的内容。


autocomplete.png

其同样继承自BootstrapInputBase,所以,它同样拥有BootstrapInputBase的所有属性。

一个最小的AutoComplete组件内容如下:

<AutoComplete Items="@StaticItems" />

AutoComplete的其他属性

ShowLabel:此为DisplayBase的属性,所有的Form组件几乎都带有此属性,切换是否显示一个Label组件。

Items:类型为List<string>,是自动完成的内容列表,组件会从里面进行匹配。

NoDataTip:无匹配项时显示的内容,默认为 无匹配数据

DisplayCount:匹配的数量

IsLikeMatch:是否模糊匹配,true的话会使用Contains进行匹配,false使用StartsWith进行匹配。默认为false

IgnoreCase:是否区分大小写,默认不区分

Debounce:防抖时间,自动完成组件在防抖时间内,只在最后一次录入后将结果发送到后端,这将大大提高性能。

SkipEnter:跳过Enter键的处理,即不会执行BootstrapInputBase中的OnEnterAsync回调。

SkipEsc:跳过Esc键的处理,即不会执行BootstrapInputBase中的OnEscAsync回调。


ValueChangedAction<string>,当输入框的内容改变时的回调。

OnCustomFilterFunc<string, Task<IEnumerable<string>>>,当输入框的内容改变时,自己进行内容过滤,可以在这里进行类似数据库查询等高级操作。

posted @ 2022-04-18 15:48  jvx  阅读(1414)  评论(0编辑  收藏  举报