您的位置:首页 > Web前端 > BootStrap

Bootstrap Blazor AutoComplete 自动完成 组件

2022-05-06 22:20 956 查看

原文链接: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)

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐