如何使用输入字段进行下拉列表以使用 blazor 进行过滤？

【问题标题】：How to do dropdown list with input field for filtering using blazor?如何使用输入字段进行下拉列表以使用 blazor 进行过滤？
【发布时间】：2020-01-07 08:11:47
【问题描述】：

我想做带有输入字段的下拉列表。我使用 Blazor 客户端框架。

这是我的代码

       <div>
            <datalist id="suggestions">
                @if (cityList != null)
                {
                    @foreach (var city in cityList)
                    {
                        <option value="@city.CityName">@city.CityName</option>
                    }
                }
            </datalist>
          <input autoComplete="on" list="suggestions" />
        </div>

这是可行的，但如果我尝试在输入中打印不存在的值 - 结果还可以。我需要阻止选择不存在的元素。我怎么能用datalist做到这一点？或者也许我需要使用选择 - 选项？提前致谢！

【问题讨论】：

标签： c# html blazor blazor-client-side

【解决方案1】：

如果您希望阻止选择不存在的元素，请使用 InputSelect 组件。

如果您想创建一个搜索机制来显示建议列表以供选择（以自动完成的形式）进行搜索，同时允许用户输入其他值进行搜索，那么请使用带有输入标签的 datalist。这毕竟是搜索工具的工作原理，对吧？我知道使用带有输入标签的 datalist 很诱人，因为它更吸引眼球。但是只有在它符合所需功能时才应该使用它。

话虽如此，我相信您可以创建一个带有 datalist 和 input 标签的组件，它可以阻止选择不存在的元素。这可能涉及 Blazor 数据绑定、C# 代码，也许还有 JSInterop。我不会尝试这样做，除非...

希望这会有所帮助...

【讨论】：