求助：实现类似Stack Overflow的产品关键词气泡输入功能

1. 调整组件数据结构 #

替换原有单一字符串绑定，改用已选关键词集合+临时输入字段，方便独立管理气泡和输入内容：

// 存储已完成的关键词气泡
private List<string> SelectedKeywords = new List<string>();
// 存储当前输入框的未完成内容
private string CurrentInput = string.Empty;
// 帮助提示框可见性控制
private bool keywordHelpNoteHidden = true;

2. 重构前端模板 #

修改布局让气泡与输入框在同一容器内，动态渲染已选关键词：

<label for="KeywordsInput">Keywords:</label>
<!-- 关键词容器：气泡+输入框 -->
<div class="keywords-container">
    @foreach (var keyword in SelectedKeywords)
    {
        <div class="bubble">
            @keyword
            <span class="bubbleclosebtn" @onclick="() => DeleteKeyword(keyword)">&times;</span>
        </div>
    }
    <InputText id="KeywordsInput" 
               @bind-Value="CurrentInput" 
               maxlength="3000" 
               @onfocus="ChangeHelpNoteVisibility" 
               @onblur="HandleBlur" 
               @oninput="HandleInput" />
</div>
<ValidationMessage For="@(() => product.Keywords)" />
<p class="keywordHelpNote" hidden="@keywordHelpNoteHidden">Separate keywords with a comma</p>

3. 优化输入处理逻辑 #

实现输入时自动拆分关键词、去重、同步绑定字段：

private void HandleInput()
{
    if (CurrentInput.Contains(','))
    {
        // 拆分并清洗关键词：去空、去重、去首尾空格
        var newKeywords = CurrentInput.Split(',', StringSplitOptions.RemoveEmptyEntries)
                                     .Select(k => k.Trim())
                                     .Where(k => !string.IsNullOrWhiteSpace(k) && !SelectedKeywords.Contains(k));
        
        SelectedKeywords.AddRange(newKeywords);
        // 清空输入框并同步到product.Keywords
        CurrentInput = string.Empty;
        SyncProductKeywords();
    }
}

// 失去焦点时，将未完成的输入转为关键词
private void HandleBlur()
{
    ChangeHelpNoteVisibility();
    var trimmedInput = CurrentInput.Trim();
    if (!string.IsNullOrWhiteSpace(trimmedInput) && !SelectedKeywords.Contains(trimmedInput))
    {
        SelectedKeywords.Add(trimmedInput);
        CurrentInput = string.Empty;
        SyncProductKeywords();
    }
}

// 同步已选关键词到product.Keywords
private void SyncProductKeywords()
{
    product.Keywords = string.Join(",", SelectedKeywords);
}

// 控制帮助提示框显示/隐藏
private void ChangeHelpNoteVisibility()
{
    keywordHelpNoteHidden = !keywordHelpNoteHidden;
}

4. 完善删除功能 #

修复删除逻辑，确保删除后同步更新绑定字段：

private void DeleteKeyword(string keywordToDelete)
{
    SelectedKeywords.Remove(keywordToDelete);
    SyncProductKeywords();
}

5. 添加样式实现气泡效果 #

补充CSS样式，让布局和交互贴近Stack Overflow标签：

.keywords-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-height: 44px;
    align-items: center;
}

.bubble {
    display: inline-flex;
    align-items: center;
    background-color: #e1ecf4;
    color: #39739d;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 14px;
    font-family: inherit;
}

.bubbleclosebtn {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
    color: #39739d;
    transition: color 0.2s;
}

.bubbleclosebtn:hover {
    color: #2c5a7c;
}

.keywords-container InputText {
    flex: 1;
    border: none;
    outline: none;
    padding: 4px 0;
    min-width: 150px;
    font-size: 14px;
}

.keywordHelpNote {
    margin-top: 6px;
    font-size: 12px;
    color: #6c757d;
}

内容的提问来源于stack exchange，提问作者Lisa