时间戳

首页 > 解决方案 > 如何更新输入的 Datalist 而不会失去对 Blazor 中输入的关注？

c# - 如何更新输入的 Datalist 而不会失去对 Blazor 中输入的关注？

问题描述

这是在 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"/>

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

标签： c#htmlasp.netblazorblazor-server-side

解决方案

我现在无法测试它，但 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();
    }
}

推荐阅读