Blazor Server中如何不丢失输入框焦点即可更新Input关联的Datalist

问题根因 #

Blazor Server异步查询到数据后，会重新渲染datalist的option节点，但浏览器原生datalist的下拉触发逻辑仅会在输入框的输入事件触发时检测当时的datalist内容。等Blazor完成服务端交互、DOM更新完毕时，输入事件已经结束，浏览器不会主动重新检测datalist的新内容，因此不会自动弹出下拉框，必须等待输入框重新获得焦点才会重新读取datalist内容。

解决方案 #

1. 新增JS交互方法 #

在页面中引入以下JS代码（可直接写在_Host.cshtml中，或单独存为JS文件引入）：

// 触发datalist下拉展示
function refreshDatalist(inputId) {
    const input = document.getElementById(inputId);
    if(!input) return;
    // 无感知切换焦点，触发浏览器重新读取datalist内容
    input.blur();
    input.focus();
}

2. 调整Blazor页面逻辑 #

首先在razor页面顶部注入JS运行时：

@inject IJSRuntime JSRuntime

调整你的Search方法，在数据赋值完成、DOM更新后调用上述JS方法：

private List<Facility> facilities = new();
private const string SearchInputId = "search-input";

private async Task Search(ChangeEventArgs e)
{
    var inputStr = e.Value?.ToString() ?? string.Empty;
    // 小于3个字符直接清空列表，不查询
    if (inputStr.Length < 3)
    {
        facilities.Clear();
        return;
    }
    // 异步查询数据库
    facilities = await _yourDbService.QueryFacilitiesAsync(inputStr);
    // 通知Blazor状态更新，优先渲染新的option节点
    StateHasChanged();
    // 等待DOM渲染完成后调用JS触发下拉，也可以替换为await Task.Yield()获得更好的兼容性
    await Task.Delay(10);
    await JSRuntime.InvokeVoidAsync("refreshDatalist", SearchInputId);
}

3. 调整前端标签的id对应 #

给input添加和代码中一致的id属性：

<datalist id="txtSearch">
    @foreach (var item in facilities)
    {
        <option value="@item.Name"/>
    }
</datalist>

<input id="@SearchInputId" autocomplete="on" type="text" list="txtSearch" @oninput="Search" @onchange="GetFacility"/>

可选优化 #

• 给搜索方法加防抖逻辑，比如设置300ms的等待间隔，用户停止输入300ms后再发起数据库查询，避免输入过程中频繁触发请求
• 如果存在输入特殊字符的场景，可以对输入内容做安全过滤，避免SQL注入或查询异常

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