如何使用 blazor 过滤带有输入字段的下拉列表?

How to do dropdown list with input field for filtering using blazor?

我想用输入字段做下拉列表。我使用 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>

它是有效的,但如果我尝试在输入中打印不存在的值 - 结果没问题。我需要阻止 selection 不存在的元素。我怎样才能用数据列表做到这一点?或者我可能需要使用 select - 选项?提前致谢!

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

如果您想创建一种搜索机制,显示 select 的搜索建议列表(以自动完成的形式),同时允许用户输入其他值进行搜索,请使用带有输入标签的数据列表。这毕竟是搜索工具的工作方式,对吧?我知道使用带输入标签的数据列表很诱人,因为它更吸引眼球。但是只有当它符合所需的功能时才应该使用它。

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

希望这对您有所帮助...