如何在不丢失对 Blazor 中输入的关注的情况下更新输入的数据列表？

Question

这是在Blazor服务器中。我正在尝试构建一个搜索功能，从键入的第三个字符开始搜索数据库，这样当页面加载时数据列表是空的，当用户开始键入时应该填充数据列表。

我从数据库中收到的列表被填充，页面确实通过foreach循环来构建数据列表中的选项，但数据列表不会显示出来(在浏览器调试器中也不可见(，直到焦点在输入元素上丢失并重新获得(我通常会按escape键(。

我能够使此工作/显示数据的唯一方法是，如果数据列表的显示是可见的，这不会导致下拉列表，并且如果我在页面初始化时从数据库中预先提取所有数据，这不会起作用，因为我不想每次加载页面时都从数据库中提取所有元素。

对数据库的调用也在等待中。

输入和数据列表代码：

<datalist id="txtSearch">
@foreach (var item in this.facilities)
{
<option value="@item.Name"/>
}
</datalist>
<input autocomplete="on" type="text" list="txtSearch" @oninput="@Search" @onchange="@GetFacility"/>

如果需要更多信息，我可以提供。非常感谢。

Answer 1

我现在不能测试它，但Blazor有一个焦点方法。也许可以试试这样的东西：

<input @ref="MyList" autocomplete="on" type="text" list="txtSearch" @oninput="@Search" @onchange="@GetFacility"/>
@code {
ElementReference MyList {get; set;}
async Task SomeAsyncMethod(){
// Load stuff
MyList.FocusAsync();
}
}