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   star

2、点击star,如下图,即可完成star,关注项目不迷路:

 

另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:

  BootstrapAdmin 项目地址:star
  https://gitee.com/LongbowEnterprise/BootstrapAdmin

  SliderCaptcha 项目地址:star
  https://gitee.com/LongbowEnterprise/SliderCaptcha

 

交流群(QQ)欢迎加群讨论

       BA & Blazor ①(795206915)          BA & Blazor ②(675147445)

 

posted @ 2022-05-06 22:20  一事冇诚  阅读(2006)  评论(0编辑  收藏  举报