Blazor实现datalist懒加载搜索：默认加载前50项 输入展示全量结果

实现逻辑 #

通过切换datalist绑定的数据源，同时满足首屏性能和原生搜索要求：

• 初始状态/输入框内容为空时，仅从SQL Server拉取前50条数据绑定到datalist，降低首屏加载开销
• 检测到用户输入内容时，加载全量数据绑定到datalist，完全复用datalist原生的匹配搜索能力，展示所有匹配结果
• 全量数据仅在用户第一次输入时加载一次，后续操作直接使用缓存，不会重复请求数据库

代码实现 #

Razor 模板部分 #

替换原有input和datalist的绑定逻辑，把输入绑定事件改为oninput实时触发，数据源统一绑定到动态切换的集合：

<input type="search" list="txtSearch"
       @bind-value="@searchTerm"
       @bind-value:event="oninput"
       @onkeydown="@Enter" />
<datalist id="txtSearch">
    @foreach (var item in currentDisplayOptions)
    {
        <option>@item.A</option>
        <option>@item.B</option>
        <option>@item.C</option>
        <option>@item.D</option>
    }
</datalist>

C# 逻辑部分 #

在@code块中添加数据源和状态切换逻辑：

@code {
    private string? searchTerm;
    // 初始加载的前50条数据
    private IEnumerable<DataModel> top50List = Enumerable.Empty<DataModel>();
    // 缓存的全量数据，仅在首次输入时加载
    private IEnumerable<DataModel> fullList = Enumerable.Empty<DataModel>();
    // 当前datalist实际渲染使用的数据源
    private IEnumerable<DataModel> currentDisplayOptions = Enumerable.Empty<DataModel>();

    protected override async Task OnInitializedAsync()
    {
        // 组件初始化只查询前50条数据
        top50List = await DbService.QueryTop50Async();
        currentDisplayOptions = top50List;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 监听搜索词变化切换数据源
        if (string.IsNullOrWhiteSpace(searchTerm))
        {
            currentDisplayOptions = top50List;
            return;
        }

        // 全量数据未加载时才请求数据库
        if (!fullList.Any())
        {
            fullList = await DbService.QueryAllValidAsync();
        }
        currentDisplayOptions = fullList;
        // 切源后刷新组件让datalist更新选项
        StateHasChanged();
    }

    private async Task Enter(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            // 保留原有回车执行搜索的逻辑
            await RunSearch(searchTerm);
        }
    }
}

优化提示 #

如果全量数据规模超过1000条，不建议直接加载全量，可以把全量查询替换为带搜索关键词的后端模糊查询，每次输入后延迟300ms请求匹配的结果即可，不需要改动前端模板逻辑，只需要替换QueryAllValidAsync为传入searchTerm的模糊查询方法。

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