如何更新輸入的數據列表而不失去對 Blazor 中輸入的關注？

Question

這是在 Blazor 服務器中。 我正在嘗試構建一個搜索功能，該功能從輸入的第三個字符開始搜索數據庫，因此在頁面加載時數據列表為空，並且應在用戶開始輸入時填充。

我從數據庫收到的列表已填充，頁面通過 foreach 循環執行 go 以在 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"/>

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

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();
    }
}