CODEWITHSUNDEEP
c#htmlblazorblazor-client-side
giacomo12312213132
giacomo12312213132

Reputation: 155

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

I want to do dropdown list with input field. I use Blazor-client-side framework.

Here is my code

       <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>

And it is work, but if i try to print in input the nonexisting value - the result is ok. I need to block the selection of nonexistent elements. How can i do it with datalist? Or maybe i need to use select - options? Thanks in advance!

Upvotes: 7

Views: 8728

Answers (1)

enet
enet

Reputation: 45626

If you wish to block the selection of nonexistent elements, use the InputSelect component.

If you want to create a search mechanism that display a list of suggestions to select (in the form of autocomplete) for search, and yet allow the user to enter other values for search, then use the datalist with input tag. This is after all how search tools work, right ? I know it is tempting to use datalist with input tag as it is more attractive to the eye. But you should use it only if it fits the required functionality.

Having said that, I believe you can create a component with datalist and input tag that can block the selection of nonexistent elements. This may involve Blazor databinding, C# code, and perhaps JSInterop. I wouldn't try to do this unless...

Hope this helps...

Upvotes: 3

Related Questions