★ FEATURED ARTICLE UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载导读本指南聚焦 ant-design-blazor 中 Select 组件的带搜索框能力展开下拉后可直接输入关键字对选项进行过滤并通过AutoClearSearchValue false保留搜索框中的输入值。读完本文你将掌握EnableSearch、AutoClearSearchValue、OnSearch、SearchDebounceMilliseconds等核心参数的完整用法理解其底层过滤与清空机制并能在本地选项过滤与远程数据搜索含防抖、Loading 与 IME 输入法场景两种典型场景下正确落地。核心参数开启搜索的入口ant-design-blazor 的 Select 组件要支持展开后搜索选项需要设置以下参数定义见 SelectBase.razor.cs 与 Select.razor.cs参数类型默认值说明EnableSearchboolfalse是否开启搜索功能当Mode SelectMode.Tags时强制为trueAutoClearSearchValuebooltrue选中某个选项后是否清空搜索框的值OnSearchActionstring无搜索框输入变化时的回调参数为当前输入的字符串SearchDebounceMillisecondsint250输入防抖毫秒数用户停止输入该时长后才触发搜索处理适用于远程数据搜索Loadingboolfalse是否显示加载指示器加载逻辑需自行实现FilterExpressionFuncSelectOptionItemTItemValue, TItem, string, bool(item, searchValue) item.Label.Contains(searchValue, StringComparison.InvariantCultureIgnoreCase)自定义本地过滤逻辑需要留意的是官方文档对AutoClearSearchValue的语义描述是选中项后清空搜索框而组件源码注释将其描述为 Whether the current search will be cleared on selecting an itemSelectBase.razor.cs两者指向同一行为默认true情况下选中一个选项后搜索框内容会被清空设置为false后搜索框的值会被保留方便连续筛选。最小示例展开即搜索官方 demoSearch.razor展示了最典型的用法基于DataSource渲染选项、通过bind-Value双向绑定选中值同时打开搜索并保留搜索词。Select DataSource_persons bind-Value_selectedValue ItemValuep p.Value ItemLabelp p.Name PlaceholderSelect a person EnableSearch AutoClearSearchValuefalse OnSearchOnSearch /Select br / br / p Selected Value: _selectedValue br / Selected Item Name: _selectedItem?.Name /p code { class Person { public string Value { get; set; } public string Name { get; set; } } ListPerson _persons; string _selectedValue; Person _selectedItem; protected override void OnInitialized() { _persons new ListPerson { new Person { Value jack, Name Jack }, new Person { Value lucy, Name Lucy }, new Person { Value tom , Name Tom } }; } private void OnSearch(string value) { Console.WriteLine($search: {value}); } }要点拆解EnableSearch开启搜索输入框下拉展开后即可输入关键字ItemValue与ItemLabel分别指定数据项取值与显示文本的投影表达式也可以使用ValueName/LabelName指定属性名AutoClearSearchValuefalse保证选中 Jack 后再选 Lucy 时之前的搜索关键字依然留在输入框内OnSearch回调接收每次输入变化后的字符串可用于日志记录或联动远程查询。AutoClearSearchValue 的底层行为AutoClearSearchValue在组件中有两处关键生效路径均位于 SelectBase.razor.cs关闭下拉时清空搜索框OnOverlayHide()L856-L892在搜索开启且AutoClearSearchValue true时调用_selectContent?.ClearInput()并把内部_searchValue、_prevSearchValue重置为空字符串若设置为false则直接return搜索词得以保留。选中项后清空搜索框多选模式下SetValueAsyncL1000-L1006在搜索开启且AutoClearSearchValue true且搜索值非空时调用ClearSearch()ClearSearch()L1045-L1075会同时复位_searchValue与输入框显示并恢复被搜索隐藏的选项。与之配套的输入框复位/恢复逻辑位于内部组件 SelectContent.razor.csClearInput()在关闭下拉时清空输入内容DiscoverySearch()在下拉重新展开时把SearchValue写回输入框。因此当AutoClearSearchValue false时关闭并再次展开下拉之前输入的搜索词依然可见。搜索过滤的源码实现本地过滤默认逻辑输入变化后Select.razor.cs的OnInputAsyncL1164-L1212会执行若搜索未开启则直接返回若下拉尚未展开自动展开下拉记录_prevSearchValue更新_searchValue调用FilterOptionItems(_searchValue)对选项做本地过滤触发OnSearch?.Invoke(_searchValue)回调。FilterOptionItemsL1268-L1322的默认过滤逻辑为matches item.Label?.Contains(searchValue, StringComparison.InvariantCultureIgnoreCase) ?? false;即对每个选项的Label做忽略大小写的包含匹配匹配的选项保留显示不匹配的选项通过IsHidden true隐藏。若设置了FilterExpression则以其自定义逻辑替代默认匹配测试用例见 Select.FilterExpression.Tests.razor其中覆盖了大小写无关、n 匹配 John/Hernán/Mariño、á 匹配 Jack/Hernán/Mariño 等边界场景。进阶场景一远程数据搜索搜索框与数据源结合官方 demo SearchBox.razor 演示了搜索与远程数据结合在OnSearch中异步请求远程接口用返回结果重建DataSource并配合防抖、Loading 与隐藏空结果提示实现输入即远程查询。Select DataSource_items bind-Value_selectedValue EnableSearch Stylewidth: 200px; ValueNamenameof(Item.Value) LabelNamenameof(Item.Label) TItemValuestring TItemItem Placeholderinput search text ShowArrowIconfalse HideNotFoundContenttrue SearchDebounceMilliseconds350 Loading_loading OnSearch(async (value) await OnSearch(value)) OnSelectedItemChangedOnSelectedItemChangedHandler /Select using System.Web; using System.Text.Json; inject HttpClient Http code { class Item { public string Value { get; set; } public string Label { get; set; } } Taskstring _oldTask; ListItem _items new ListItem(); string _selectedValue; bool _loading; private async Task OnSearch(string value) { if (!string.IsNullOrWhiteSpace(value)) { if (_oldTask null || _oldTask.IsCompleted) { _loading true; StateHasChanged(); var key HttpUtility.UrlEncode(value); var url $https://suggest.taobao.com/sug?codeutf-8q{key}; _oldTask Http.GetStringAsync(url); var content await _oldTask; var result JsonSerializer.DeserializeApiResult(content); _items.Clear(); foreach (var item in result.result) { _items.Add(new Item { Value item[0], Label item[0]}); } } } else { if (_items.Any()) _items.Clear(); } _loading false; StateHasChanged(); } private void OnSelectedItemChangedHandler(Item value) { Console.WriteLine($selected: ${value?.Label}); } public class ApiResult { public Liststring[] result { get; set; } } }远程搜索场景的工程要点SearchDebounceMilliseconds350让请求只在用户停止输入 350ms 后触发避免每次按键都发起请求。该防抖在 SelectContent.razor.cs 中通过Timer实现SearchDebounceMilliseconds的组件默认值为 250SelectBase.razor.cs用_oldTask记录上一次请求任务仅在前一次请求完成后才发起新请求防止并发响应乱序覆盖结果Loading_loading在请求期间显示组件内置的加载指示器HideNotFoundContenttrue在无匹配结果时隐藏无数据占位内容ShowArrowIconfalse可隐藏右侧箭头图标让视觉更接近纯搜索输入框。进阶场景二输入法IME组合输入针对中文等依赖输入法组合输入的搜索场景组件做了专门的 IME 处理相关测试见 Select.IME.Tests.razor输入法组合期间compositionstart到compositionend不会触发搜索过滤与OnSearch回调避免拼音中间态污染过滤结果SelectContent.razor.cs组合输入结束后组件会用当前输入值补发一次OnInputChange确保最终中文结果被正确过滤。这一点对中文业务系统尤其重要若不加处理用户在输入zhong选字过程中就会触发多次无效搜索。多选 / 标签模式下的搜索IsSearchEnabled的实现SelectBase.razor.cs为internal bool IsSearchEnabled EnableSearch || Mode SelectMode.Tags;也就是说Mode SelectMode.Tags标签模式下搜索框始终开启无需显式设置EnableSearch。多选Multiple与标签模式选中项后AutoClearSearchValue true时同样会调用ClearSearch()清空搜索词并恢复被过滤隐藏的选项见上文SetValueAsync路径。常见问题与排查建议选中项后搜索词被清空这是AutoClearSearchValue true默认的预期行为如需保留显式设置AutoClearSearchValue false。下拉未展开时无法搜索OnInputAsync中仅在IsSearchEnabled为真且输入发生时自动展开下拉请确认已设置EnableSearchTags 模式除外。远程搜索请求过于频繁调大SearchDebounceMilliseconds并在OnSearch内用任务引用防并发参考 SearchBox demo 的_oldTask模式。自定义过滤不生效确认使用FilterExpression而非修改DataSource后未调用刷新本地过滤逻辑见FilterOptionItems远程场景则需自行更新DataSource。中文输入被切词过滤检查是否在 IME 组合期间触发了搜索组件已内置compositionstart/compositionend保护无需自行处理。参考资料官方带搜索框 demoSearch.md 与 Search.razor远程搜索 demosearch-box.md 与 SearchBox.razorSelect 完整参数文档index.zh-CN.md组件核心实现SelectBase.razor.cs、Select.razor.cs、SelectContent.razor.cs相关测试Select.FilterExpression.Tests.razor、Select.IME.Tests.razor赞分享UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载相关推荐Ant Design Blazor Select 带搜索框实战EnableSearch、AutoClearSearchValue 与自定义搜索过滤Ant Design Blazor Select 带搜索框实战EnableSearch、AutoClearSearchValue 与自定义搜索过滤 导读 在前端UI组件设计系统ant-design-blazor Transfer 组件带搜索框ShowSearch完整实战指南ant design blazor Transfer 组件带搜索框ShowSearch完整实战指南 本文以 ant design blazor 仓库中 TrUI组件前端esp-iot-solution 中的 esp_lcd_panel_io_additions用 3-Wire SPI 软件时序驱动 RGB 并行接口 LCD 初始化esp iot solution 中的 esp_lcd_panel_io_additions用 3 Wire SPI 软件时序驱动 RGB 并行接口 LCD前端UI组件设计系统上一篇解锁显卡隐藏性能NVIDIA Profile Inspector深度解析与实战应用下一篇如何用免费开源工具彻底解决Dell G15散热问题3步终极控制方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
