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组件在tags标签与multiple多选模式下提供的一项高效输入能力当用户一次性输入露西,杰克这类以逗号分隔的文本并粘贴或输入到搜索框时组件会依据TokenSeparators定义的分隔符自动将其拆分为多个标签并一次性完成选择/创建。本文以仓库中的官方演示 automatic-tokenization.md 与 AutomaticTokenization.razor 为骨架结合Select组件源码Select.razor.cs深入讲解其配置方式、运行原理与实战细节读完即可在自己的项目中复现复制粘贴批量生成标签的交互。一、功能概述什么是自动分词自动分词Automatic tokenization解决的核心痛点是在标签型多选场景下用户往往需要从 Excel、记事本等外部来源一次性粘贴一批以逗号或其他字符分隔的值。若没有该特性用户必须逐个输入并回车而启用自动分词后只需一次粘贴即可批量生成标签。官方演示的交互文案为试下复制露西,杰克到输入框里。只在 tags 和 multiple 模式下可用。需要特别强调的是该功能的使用前提仅SelectMode.Tags与SelectMode.Multiple两种模式生效枚举定义见 SelectMode.csDefault、Multiple、Tags需要开启搜索能力EnableSearch因为分词触发点位于输入框的文本输入事件中。二、官方演示代码解读仓库中的完整示例位于 AutomaticTokenization.razor其核心 Select 声明如下Select ModeSelectMode.Tags bind-Values_selectedValues LabelNamenameof(Tag.Label) ValueNamenameof(Tag.Value) TItemValuestring TItemTag TokenSeparatorsnew[]{ , } EnableSearch /Select关键参数逐一说明参数取值作用ModeSelectMode.Tags标签模式允许把任意输入转换为标签bind-ValuesIEnumerablestring多选场景下选中的值集合双向绑定TItem/TItemValueTag/string泛型声明选项的数据模型为自定义Tag类值的类型为stringLabelName/ValueNameLabel/Value指定Tag类中用作显示文本与值的属性名TokenSeparatorsnew[]{ , }自动分词的分隔符数组本示例将英文逗号作为分隔符EnableSearchtrue开启搜索框分词输入依赖该输入框示例在OnInitialized中构造了一批十六进制风格的数据项如0a10、0b11…用于演示输入文本与已有选项匹配时直接选中、不匹配时创建新标签两种行为class Tag { public string Value { get; set; } public string Label { get; set; } } private ListTag _items; private IEnumerablestring _selectedValues; protected override void OnInitialized() { const int min 10; const int max 36; _items new ListTag(); for (var i min; max i; i) { var content Convert.ToString(i, 16).PadLeft(2, 0) i.ToString(); _items.Add(new Tag { Value content, Label content }); } }此外示例还演示了OnCreateCustomTagHandlerAsync这一自定义标签创建回调当用户输入的文本在现有选项中不存在时先创建新的Tag加入_items再追加到_selectedValues。值得注意的是代码中的两处注释强调了 BlazorServer 端时序问题private async Task OnCreateCustomTagHandlerAsync(string value) { var labelExists _items.Any(x x.Label.Equals(value, StringComparison.InvariantCultureIgnoreCase)); if (!labelExists) { var newTag new Tag { Value _items.Count().ToString(), Label value }; _items.Add(newTag); await Task.Delay(1); // ---- Important for Blazor (server-side) between the ADD and the APPEND if (_selectedValues null) { var list new Liststring { newTag.Value }; _selectedValues list; } else { _selectedValues _selectedValues.Append(newTag.Value); } StateHasChanged(); // ---- Important after Delay 1 } }这里的Task.Delay(1) StateHasChanged()是为了确保 Server 端在把新标签追加进选项集合与追加进已选集合之间完成一次渲染同步避免因并发修改集合导致 UI 状态异常属于官方演示中沉淀的实战经验。三、TokenSeparators 参数详解TokenSeparators是开启自动分词的总开关其源码定义位于 Select.razor.cs/// summary /// Define what characters will be treated as token separators for newly created tags. /// Useful when creating new tags using only keyboard. /// /summary [Parameter] public char[] TokenSeparators { get; set; }参数文档表见 index.zh-CN.md中的说明为定义哪些字符将被视为新创建标签的标记分隔符仅使用键盘创建新标签时很有用。类型char[]默认值-即未设置此时不启用分词。实践要点默认值为空null不设置该参数时粘贴露西,杰克只会作为一段完整搜索文本处理不会拆分支持多个分隔符类型为char[]例如TokenSeparatorsnew[] { ,, ;, , }可同时兼容英文与中文逗号、分号分隔符可以出现在任何输入位置源码在OnInputAsync中通过TokenSeparators.Any(t _searchValue.Contains(t))检测输入中是否出现任意分隔符Select.razor.cs因此即使文本是露西,杰克而非露西, 杰克也能正确拆分不需要用户手动加空格。四、底层实现原理从输入到标签的完整链路自动分词并非简单的字符串Split其背后是一条完整的输入检测 → 拆分匹配 → 选中/创建 → 关闭收起调用链全部位于 Select.razor.cs 中。4.1 输入事件检测OnInputAsync用户在搜索框内键入或粘贴内容时会触发OnInputAsync(ChangeEventArgs e)Select.razor.cs。其核心逻辑未开启EnableSearch时直接返回不参与任何分词处理若上一次按键已确认是分隔符_isToken true则先TrimEnd(TokenSeparators)去掉末尾多余分隔符避免产生空标签否则保存原始输入并检测输入文本中是否包含任一TokenSeparators字符一旦检测到分隔符立即调用TokenizeSearchedPhrase(_searchValue)执行分词分词完成后若输入非空继续走常规的FilterOptionItems选项过滤逻辑并触发OnSearch回调。4.2 分词与匹配TokenizeSearchedPhraseTokenizeSearchedPhraseSelect.razor.cs是自动分词的核心方法处理步骤可以拆解为第一步拆分并去重。将输入按TokenSeparators拆分去重后转成以Trim()后的标签文本为键的字典用于后续匹配tokenItemMatch searchValue.Split(TokenSeparators).Distinct().ToDictionary( item item.Trim(), _ default(SelectOptionItemTItemValue, TItem));第二步匹配已有选项Tags 模式。在SelectOptionItems与历史新增标签AddedTags的并集中凡是Label与某个分词文本相同的选项直接调用SetValueAsync(item)选中它foreach (var item in selectOptionItems) { if (tokenItemMatch.ContainsKey(item.Label)) { await SetValueAsync(item); tokenItemMatch[item.Label] item; } }第三步为未匹配文本创建新标签。对仍然没有对应选项的键通过CreateSelectOptionItem(tokenItem.Key, false)生成新的标签项并加入选项集合再执行选中foreach (KeyValuePairstring, SelectOptionItemTItemValue, TItem tokenItem in tokenItemMatch) { if (tokenItem.Value null) { tokenItemMatch[tokenItem.Key] CreateSelectOptionItem(tokenItem.Key, false); SelectOptionItems.Add(tokenItemMatch[tokenItem.Key]); await SetValueAsync(tokenItemMatch[tokenItem.Key]); } }第四步收尾。若下拉面板仍处于展开状态则调用CloseAsync()关闭随后SetInputBlurAsync()让输入框失焦完成一次干净利落的粘贴即选中体验。对于Multiple 模式分支逻辑略有不同Select.razor.cs只遍历现有SelectOptionItems做匹配选中不会为不存在的文本自动创建新标签——这与 Multiple 模式本身只能从现有选项中选择的语义保持一致也再次印证了自动分词可用于 multiple但创建新标签仅限 tags 模式的定位。4.3 键盘输入检测OnKeyDownAsync除了粘贴场景纯键盘输入同样支持分词。OnKeyDownAsyncSelect.razor.cs会在每次按键时判断else if (TokenSeparators is not null TokenSeparators.Length 0) { _isToken TokenSeparators.Contains(e.Key[0]); }即当用户敲击的分隔符位于TokenSeparators中时标记_isToken true随后下一次OnInputAsync就会据此对输入做TrimEnd(TokenSeparators)并触发分词。这一设计保证了输入露西,后继续输入杰克也能在敲下逗号的那一刻即时生成第一个标签。4.4 新标签的创建CreateSelectOptionItemCreateSelectOptionItemSelect.razor.cs负责把分词文本转换为真正可用的选项项其内部有明确的优先级逻辑若TItem本身就是string标签文本直接同时作为Item与Value否则若设置了DataSource尝试按标签文本忽略大小写在数据源中查找匹配项找到则取出其Value仍未匹配且处于 Tags 模式时尝试通过CustomTagLabelToValue委托把标签文本转换为值全部失败则值保持默认值但标签文本始终被保留最终生成IsAddedTag true的新标签项。这解释了为什么官方演示中即使TItem是自定义Tag类而非string分词后依然能正确工作——因为LabelName/ValueName与CreateSelectOptionItem的匹配逻辑共同保证了标签文本与数据模型的映射。五、实战组合分词 自定义标签回调当业务需要用户输入的新文本既要成为标签也要持久化到后端数据源时可将TokenSeparators与OnCreateCustomTag回调搭配使用。OnCreateCustomTag的签名与说明见 Select.razor.cs/// summary /// Called when custom tag is created. /// /summary [Parameter] public Actionstring OnCreateCustomTag { get; set; }一个典型实现以官方演示的Tag模型为例Select ModeSelectMode.Tags bind-Values_selectedValues LabelNamenameof(Tag.Label) ValueNamenameof(Tag.Value) TItemValuestring TItemTag TokenSeparatorsnew[] { ,, } OnCreateCustomTagOnCreateCustomTagHandlerAsync EnableSearch /Select此时用户粘贴露西,杰克后组件会先分词为两个标签文本匹配已有选项并选中对不存在的文本走CreateSelectOptionItem创建临时标签随后触发OnCreateCustomTag开发者即可在回调中把新标签写入自己的数据源参考演示代码中_items.Add(newTag)的逻辑。若希望精确控制标签文本到值的转换还可以进一步使用CustomTagLabelToValue委托Select.razor.cs。六、常见问题与注意事项为什么粘贴后没有自动分词请依次检查Mode是否为Tags或MultipleEnableSearch是否开启TokenSeparators是否已赋值默认null时不启用分隔符是否与粘贴文本中的字符一致例如英文逗号,与中文逗号是两个不同字符。Multiple 模式下输入新文本为何不生成标签这是设计行为。TokenizeSearchedPhrase的 Multiple 分支仅匹配现有选项创建新标签CreateSelectOptionItem只在Mode SelectMode.Tags时发生参见 Select.razor.cs。多个分隔符与空格的处理。分词后每个片段会经过Trim()因此露西 , 杰克这类带空格的输入也能得到干净的标签同时源码对_isToken状态做了TrimEnd(TokenSeparators)处理连续输入多个分隔符不会产生空标签。Server 端渲染时序。若在OnCreateCustomTag中同时修改选项集合与已选集合建议参考官方演示加入await Task.Delay(1)并调用StateHasChanged()确保 Blazor Server 端两次集合变更之间完成渲染同步。自定义数据模型。当TItem不是string时务必通过LabelName/ValueName或DataSource 标签匹配建立文本与模型的映射否则新标签可能无法正确取值详见 CreateSelectOptionItem 的匹配优先级。七、小结自动分词把复制粘贴批量生成标签从手动逐条输入中解放出来是 tags/multiple 模式下高价值的生产力特性。其实现既简单又严谨TokenSeparators一个参数开启能力OnInputAsync负责输入检测TokenizeSearchedPhrase完成拆分、去重、匹配与创建CreateSelectOptionItem兜底处理自定义数据模型整体链路在 Select.razor.cs 中清晰可循。读者可以直接复用官方演示 AutomaticTokenization.razor 作为起点按需扩展多分隔符、OnCreateCustomTag数据持久化等能力。赞分享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点击查看免费下载相关推荐NocoBase 任务管理进阶子任务拆分、每日工时填报与进度计算实战NocoBase 任务管理进阶子任务拆分、每日工时填报与进度计算实战 本文基于 NocoBase 开源项目官方教程《第 11 章子任务与工时计算》整理并深入前端UI组件设计系统Ant Design Select 自动分词Automatic Tokenization实战tokenSeparators 用法与粘贴批量生成标签Ant Design Select 自动分词Automatic Tokenization实战tokenSeparators 用法与粘贴批量生成标签 Ant前端UI组件设计系统ng-zorro-antd Select 自动分词Automatic Tokenization完全指南nzTokenSeparators 原理、用法与源码解析ng zorro antd Select 自动分词Automatic Tokenization完全指南nzTokenSeparators 原理、用法与源码UI组件前端上一篇Tippecanoe核心功能解析让你的地图数据在任何缩放级别都清晰可见下一篇React博客GitHub高级技巧自定义UI、添加评论与社交分享功能完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考