在列表中强制输入值（搜索时键入）？

Question

（Asp.net core 3.1，Blazor 服务器端）

我正在构建一个下拉输入，其中包含由输入框中的键入值动态加载的建议。如何在suggestions列表中强制<input>的值？ （比如<select>）

<datalist id="suggestions">
    @foreach (var b in filteredList)
    {
        <option value="@b.Value">@b.Text</option>
    }
</datalist>
<input autoComplete="on" list="suggestions" value="@theValueEntered"
               @oninput="OnInputChanged"
               @onfocus='() => OnInputChanged(new ChangeEventArgs { Value = "" })'/>

@code {
    private CancellationTokenSource cancellationTokenSource;
    private string theValueEntered;
    private IEnumerable<Data> filteredList;

    private Task OnInputChanged(ChangeEventArgs e)
    {
        theValueEntered = e.Value as string;
        cancellationTokenSource?.Cancel();
        cancellationTokenSource?.Dispose();
        cancellationTokenSource = new CancellationTokenSource();
        var token = _cancellationTokenSource.Token;

        awaitTask.Delay(250, token);
        filteredList = await dbContext.Data // Millions rows
                            .Where(x => x.Name.StartWith(theValueEntered)
                            .Take(25)
                            .ToListAsync();
    }
}

Answer 1

只需将其添加到过滤列表中

filteredList.Add(theValueEntered);

或者添加到前面

filteredList.Insert(0, theValueEntered);