MudBlazor Autocomplete组件输入文本自动清空问题求助

核心问题分析 #

你的Autocomplete输入文本自动清空，主要由以下几个原因导致：

1. ResetValueOnEmptyText属性的副作用
   该属性设为true时，输入框文本为空会自动重置绑定的Value，但在防抖（DebounceInterval）过程中，服务器返回数据的时机与输入状态冲突时，会触发不必要的Value重置，连带清空输入文本。

2. SearchFunc中直接修改selecteditemResponse的不当操作
   在OnComboSearch中，输入值为空时直接重置selecteditemResponse，会触发组件状态变更，干扰输入框的文本绑定逻辑。

3. 未明确管理输入文本状态
   MudAutocomplete的输入文本和选中Value是两个独立状态，仅绑定Value未管理输入文本，会导致状态不同步时文本被清空。

4. 冗余的StateHasChanged调用
   在NotifyHooks中手动调用StateHasChanged，强制组件重新渲染，若此时输入文本状态未同步，会导致文本被重置。

分步修复代码 #

1. 调整MudAutocomplete组件属性 #

修改组件标签，移除ResetValueOnEmptyText，改用双向绑定简化逻辑，并新增输入文本绑定：

<MudAutocomplete T="ItemResponse"
                 Label="AutoComplete" 
                 SearchFunc="@OnComboSearch"  
                 @bind-Value="selecteditemResponse"
                 @bind-Text="searchText"
                 DebounceInterval="700"/>

2. 添加输入文本绑定变量 #

在@code块中新增用于绑定输入框文本的变量：

private string searchText = string.Empty;
private ItemResponse selecteditemResponse = new ItemResponse();
IList<ItemResponse> ItemRes = new List<ItemResponse>();
private bool IsServerFiltering = true;

3. 修改SearchFunc逻辑 #

移除直接修改selecteditemResponse的代码，仅负责返回搜索结果：

private async Task<IEnumerable<ItemResponse>> OnComboSearch(string value)
{
    if (string.IsNullOrEmpty(value))
    {
        await ReadAutoCompleteData();
        return ItemRes;
    }
    
    if (IsServerFiltering)
    {
        await ReadAutoCompleteData(value);
    }
    return ItemRes.Where(x => x.ItemName != null && x.ItemName.Contains(value, StringComparison.InvariantCultureIgnoreCase));
}

4. 简化ValueChanged相关逻辑 #

移除冗余的OnComboValueChanged和NotifyHooks方法，@bind-Value会自动同步selecteditemResponse：

// 移除原OnComboValueChanged和NotifyHooks方法

5. 优化数据加载方法（可选） #

避免直接替换整个列表导致的渲染开销，改为清空后添加新项：

public async Task ReadAutoCompleteData(string SearchQuery = "")
{
    ComboRequestDTO requestDTO = new ComboRequestDTO();
    requestDTO.SearchQuery = SearchQuery;

    var newData = await _comboManager.GetItemResponses(requestDTO);
    ItemRes.Clear();
    foreach (var item in newData)
    {
        ItemRes.Add(item);
    }
}

关键修复说明 #

• 绑定输入文本：通过@bind-Text明确管理输入框文本状态，避免Value变更时连带清空文本。
• 移除不必要的状态重置：不在SearchFunc中修改选中值，让组件自身逻辑处理选中与输入的关联。
• 简化双向绑定：使用@bind-Value替代手动Value+ValueChanged，减少状态同步错误。
• 关闭自动重置Value：移除ResetValueOnEmptyText，避免输入过程中误触发Value重置。

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