Bootstrap Blazor AutoComplete 自動完成組件

原文鏈接：http://www.rzrgm.cn/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>	—	—