Blazor 組件庫 BootstrapBlazor 中AutoComplete組件介紹


AutoComplete組件介紹

AutoComplete組件和文本框基本上樣子是一樣的,只不過AutoComplete組件還帶有一個下拉列表,可以從中選擇對應的內容。


autocomplete.png

其同樣繼承自BootstrapInputBase,所以,它同樣擁有BootstrapInputBase的所有屬性。

一個最小的AutoComplete組件內容如下:

<AutoComplete Items="@StaticItems" />

AutoComplete的其他屬性

ShowLabel:此為DisplayBase的屬性,所有的Form組件幾乎都帶有此屬性,切換是否顯示一個Label組件。

Items:類型為List<string>,是自動完成的內容列表,組件會從里面進行匹配。

NoDataTip:無匹配項時顯示的內容,默認為 無匹配數據

DisplayCount:匹配的數量

IsLikeMatch:是否模糊匹配,true的話會使用Contains進行匹配,false使用StartsWith進行匹配。默認為false

IgnoreCase:是否區分大小寫,默認不區分

Debounce:防抖時間,自動完成組件在防抖時間內,只在最后一次錄入后將結果發送到后端,這將大大提高性能。

SkipEnter:跳過Enter鍵的處理,即不會執行BootstrapInputBase中的OnEnterAsync回調。

SkipEsc:跳過Esc鍵的處理,即不會執行BootstrapInputBase中的OnEscAsync回調。


ValueChangedAction<string>,當輸入框的內容改變時的回調。

OnCustomFilterFunc<string, Task<IEnumerable<string>>>,當輸入框的內容改變時,自己進行內容過濾,可以在這里進行類似數據庫查詢等高級操作。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM