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)
- 基于bootstrap插件实现autocomplete自动完成表单
- Android组件复习之基本组件06—autocompletetextview自动完成文本框
- Android组件复习之基本组件06—autocompletetextview自动完成文本框
- BootStrap 智能表单实战系列(十)自动完成组件的支持
- Android组件系列(1):自动完成输入内容的组件(AutoCompleteTextView )
- Android高级组件AutoCompleteTextView自动完成文本框使用详解
- Android开发高级组件之自动完成文本框(AutoCompleteTextView)用法示例【附源码下载】
- Kissy自动完成组件AutoComplete(仿淘宝搜索)
- php + Bootstrap-v3-Typeahead 自动完成组件的使用
- BootStrap 智能表单系列 十 自动完成组件的支持
- Android基础组件(一)自动完成控件AutoCompleteTextView
- php + Bootstrap-v3-Typeahead 自动完成组件的使用
- Android组件系列(1):自动完成输入内容的组件(AutoCompleteTextView )
- bootstrap用 juqery Autocomplete组件实现搜索框自动提示
- Android——适配器其他组件(AutoCompleteTextView:自动完成文本编辑框;Spinner:下拉列表)
- Android 组件系列(1):自动完成输入内容的组件(AutoCompleteTextView )
- 对自动完成文本框(AutoCompleteTextView)组件的一点补充
- 下拉框自动完成(autocomplete)带有分页功能SutaraLumpur-jquery.ajaxComboBox.js的使用
- jQuery.Autocomplete实现自动完成功能-搜索提示功能
- Blazor 组件库 BootstrapBlazor 中Tag组件介绍