如何更新输入的 Datalist 而不会失去对 Blazor 中输入的关注？答案

【问题标题】：How do I update an Input's Datalist without losing focus on the input in Blazor?如何更新输入的 Datalist 而不会失去对 Blazor 中输入的关注？
【发布时间】：2021-08-03 18:32:36
【问题描述】：

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

我从数据库收到的列表已填充，页面确实通过 foreach 循环在 datalist 中构建选项，但 datalist 不会显示自己（并且在浏览器调试器中也无法查看），直到焦点位于在输入元素上丢失并重新获得（按退出是我通常做的）。

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

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

输入和数据列表代码：

<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"/>

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

【问题讨论】：

我认为您需要将代码包装到组件中并在操作列表时刷新组件。这是一篇包含如何构建 DataList 组件的代码的文章 - shauncurtis.github.io/articles/Blazor-DataList-Control.html。您应该能够调整此代码以仅在第三个字符上填充数据列表，或者将其用作如何捕获和使用 keydown 事件的指针。
我也在尝试这样做，遇到与您相同的问题-您找到解决方案了吗？ @Kyle Cintron

标签： c# html asp.net blazor blazor-server-side

【解决方案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();
    }
}

【讨论】：