Blazor待办组件实时搜索问题：输入需回车/失焦才生效

• 问题核心：Blazor默认的@bind绑定的是onchange事件，只有输入框失焦或按下回车键时才会更新绑定的SearchItem值，导致搜索无法实时触发。
• 解决办法：将绑定事件改为oninput，让输入框内容每变化一次就立即同步绑定值，实现实时搜索。

修改后的完整代码如下：

<input class="form-control" type="text" @bind="SearchItem" @bind:event="oninput" placeholder="search item" /> 
<ul> 
@foreach (var item in FilteredItems) 
{ 
    <li>@item</li> 
} 
</ul> 

@code {
    private string? SearchItem { get; set; } 
    // 替换为你实际的待办列表数据源
    private List<string> ItemsList = new List<string> { "完成Blazor组件", "整理文档", "测试功能" };

    private List<string> FilteredItems { 
        get 
        { 
            if (string.IsNullOrWhiteSpace(SearchItem)) 
            { 
                return ItemsList.ToList(); 
            } 
            else 
            { 
                return ItemsList.Where(x => x.Contains(SearchItem)).ToList(); 
            }
        }
    }
}

补充说明 #

1. 加入@bind:event="oninput"后，输入框内容的每一次变化都会立刻同步到SearchItem属性
2. FilteredItems作为计算属性，会在SearchItem更新时自动重新计算，Blazor会随之刷新UI，实现列表的实时过滤
3. 如果需要忽略大小写的模糊搜索，可以把过滤条件改为x.IndexOf(SearchItem, StringComparison.OrdinalIgnoreCase) >= 0

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