You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MudAutoComplete问题:按下回车无法获取用户输入的当前文本

问题分析与解决方案

问题根源

你遇到的问题是因为开启了CoerceText="true"属性。这个属性的作用是:当用户输入的文本与建议列表中的项存在部分匹配时,自动将输入框的文本强制替换为第一个匹配的建议项。所以当你按下回车时,输入框的文本已经被替换成了第一个建议项,而非你原本输入的内容。

解决方法

方案一:关闭自动替换功能

如果不需要自动将输入文本替换为建议项,直接将CoerceText设置为false。此时输入框会保留用户输入的原始文本,回车时就能获取到用户实际输入的内容。

修改后的代码示例:

<MudAutocomplete T="string" 
                 Variant="Variant.Outlined"
                 @ref="@_txtAutoCompelete"
                 ResetValueOnEmptyText="true"
                 CoerceText="false"
                 @bind-Text="_strSearchQuery"
                 SearchFunc="@SearchQuery"
                 OnKeyUp="@SearchQueryResult"
                 Adornment="Adornment.End"
                 AdornmentIcon="@Icons.Filled.Search"
                 AdornmentColor="Color.Success">
</MudAutocomplete>

@code{
private string _strSearchQuery;

    private async Task SearchQueryResult(KeyboardEventArgs e)
    {
            if (e.Code == "Enter" || e.Code == "NumpadEnter")
            {
                    string userInput = _strSearchQuery; // 此时为用户输入的原始文本
                    string selectedSuggestion = _txtAutoCompelete.Value; // 若用户未选择建议项则为null
            }
    }

    private async Task<IEnumerable<string>> SearchQuery(string value)
    {
        // 模拟搜索逻辑,返回建议列表
        var suggestions = new List<string> { $"Hi {value}", $"{value} Bye..", $"{value} Bye 2" };
        return suggestions.Where(s => s.Contains(value, StringComparison.OrdinalIgnoreCase));
    }
}

方案二:保留自动替换,同时记录原始输入

如果需要保留CoerceText的自动替换功能,但又要获取用户的原始输入,可以通过TextChanged事件记录每次输入的原始文本。

修改后的代码示例:

<MudAutocomplete T="string" 
                 Variant="Variant.Outlined"
                 @ref="@_txtAutoCompelete"
                 ResetValueOnEmptyText="true"
                 CoerceText="true"
                 @bind-Text="_strSearchQuery"
                 TextChanged="@OnTextChanged"
                 SearchFunc="@SearchQuery"
                 OnKeyUp="@SearchQueryResult"
                 Adornment="Adornment.End"
                 AdornmentIcon="@Icons.Filled.Search"
                 AdornmentColor="Color.Success">
</MudAutocomplete>

@code{
private string _strSearchQuery;
private string _originalUserInput; // 存储用户原始输入

    private void OnTextChanged(string text)
    {
        // 实时记录用户输入的原始文本
        _originalUserInput = text;
    }

    private async Task SearchQueryResult(KeyboardEventArgs e)
    {
            if (e.Code == "Enter" || e.Code == "NumpadEnter")
            {
                    string userInput = _originalUserInput; // 获取用户原始输入
                    string selectedSuggestion = _txtAutoCompelete.Value; // 获取自动选中的建议项
            }
    }

    private async Task<IEnumerable<string>> SearchQuery(string value)
    {
        var suggestions = new List<string> { $"Hi {value}", $"{value} Bye..", $"{value} Bye 2" };
        return suggestions.Where(s => s.Contains(value, StringComparison.OrdinalIgnoreCase));
    }
}

内容的提问来源于stack exchange,提问作者hdv212

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.10 23:00:56