Bootstrap Blazor AutoComplete 自动完成 组件
作者:互联网
原文链接:https://www.cnblogs.com/ysmc/p/16237683.html
官方链接:https://www.blazor.zone/autocompletes
简介
AutoComplete 组件,可以根据用户所输入的字符串匹配出候选项,如需要输入邮箱时,自动提供可供选择的邮箱后缀:
Items 属性为匹配的数据集合,组件将会自动进行过滤匹配;组件同时也提供了 自定义集合过滤规则 OnCustomFilter,可以根据实际的需求自定义规则,如匹配的数据集合数据量比较大,需要根据输入的值进行查询输出(如调用WebApi、数据库等等),还有设置当输入的字符数量超过3才返回匹配结果:
<AutoComplete @bind-Value="@Value" Items="@Items" DisplayText="@DisplayText" ShowLabel="ShowLabel" Debounce="@Debounce" OnCustomFilter="OnFilter" OnSelectedItemChanged="OnSelectedChanged" IsSelectAllTextOnFocus="true" />
private async Task<IEnumerable<string>> OnFilter(string value) { if (value.Length <= 3) { return new List<string>(); } var items = await GetItemsAsync(value); return items.Any() ? items : new List<string> { }; }
组件同时支持自定义验证规则 ValidateRules 属性
CustomerRules.Add(new CustomerValidator(new EmailAddressAttribute()));
Attributes 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
ShowLabel | 是否显示前置标签 | bool | true|false | true |
ChildContent | 内容 | RenderFragment | — | — |
Items | 内容 | IEnumerable<string> | — | — |
NoDataTip | 自动完成数据无匹配项时提示信息 | string | — | 无匹配数据 |
DisplayCount | 匹配数据时显示的数量 | int? | — | — |
ValueChanged | 文本框值变化时回调委托方法 | Action<string> | — | — |
IsLikeMatch | 是否开启模糊匹配 | bool | true|false | false |
IgnoreCase | 匹配时是否忽略大小写 | bool | true|false | true |
OnCustomFilter | 自定义集合过滤规则 | Func<string, Task<IEnumerable<string>>> | — | — |
Debounce | js 防抖时间,毫秒 | int | — | 0 |
SkipEnter | 是否跳过 Enter 按键处理 | bool | true/false | false |
SkipEsc | 是否跳过 Esc 按键处理 | bool | true/false | false |
OnValueChanged | Value 改变时回调方法 | Func<string, Task> | — | — |
OnSelectedItemChanged | 下拉菜单选择回调方法 | Func<string, Task> | — | — |
写在最后
Bootstrap Blazor 官网地址:https://www.blazor.zone
希望大佬们看到这篇文章,能给项目点个star支持下,感谢各位!
star流程:
1、访问点击项目链接:BootstrapBlazor
2、点击star,如下图,即可完成star,关注项目不迷路:
另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:
BootstrapAdmin 项目地址:
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 项目地址:
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)欢迎加群讨论
BA & Blazor ①(795206915) BA & Blazor ②(675147445)
标签:star,false,Bootstrap,AutoComplete,bool,https,匹配,Blazor,true 来源: https://www.cnblogs.com/ysmc/p/16237683.html