asp.net core razor dropdown list with input

Question

I'm looking for dropdown list with possibility to input value. Let's say a have a default list of items, but user can input its own.

I have the following code in controller

 ViewBag.JobTypes = new SelectList(await _mediator.Send(new GetJobTypesQuery()), "Id", "Name");

and view

<div class="form-group">
      <label asp-for="JobTypeId"></label>
      <select asp-for="JobTypeId" asp-items="ViewBag.JobTypes"></select>
</div>

but in this case user can only select value from dropdown. How to allow custom input? I can't google the answer anywhere.

This has nothing to do with c# or MVC. You need to use some kind of client-side JS component to support that, because standard select doesn’t allow user input. There’s plenty of such components available. — Alex Skalozub
– Alex Skalozub, Commented Mar 1, 2020 at 23:37
As @YegorAndrosov notes, this type of functionality can be achieved via an autocomplete control. Though, it's also called a combobox. When searching for a JavaScript component to help address this problem, using one of those two keywords should help you to quickly identity the options. — Jeremy Caney
– Jeremy Caney, Commented Mar 1, 2020 at 23:51

Rena · Accepted Answer · 2020-03-02 02:32:50Z

As @Yegor said,you could use autocomplete,here is a working demo:

1.Model:

public class Job
{
    public int Id { get; set; }
    public string Name { get; set; }
}

2.View:

<form asp-action="Search" method="post">
    <div>
        <div class="form-group">
            <label class="control-label">SearchName</label>
            <input type="text" name="search" id="tags" />
        </div>
        <div class="form-group">
            <input type="submit" value="Search" class="btn btn-primary" />
        </div>
    </div>
</form>
@section Scripts{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#tags").autocomplete({
                source: '/Home/Test'
            });
        });
    </script>
}

3.Controller:

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public IActionResult Test()
    {
        var name = HttpContext.Request.Query["term"].ToString();
        var jobnames = new List<Job>() {
            new Job(){ Id = 1, Name="aaa"},
            new Job(){ Id = 2, Name="abc"},
            new Job(){ Id = 3, Name="acd"},
            new Job(){ Id = 4, Name="ade"},
            new Job(){ Id = 5, Name="bcd"},
            new Job(){ Id = 6, Name="bef"},
        };
        var data = jobnames.Where(j => j.Name.Contains(name)).Select(j => j.Name).ToList();
        return Ok(data);
    }
    [HttpPost]
    public IActionResult Search(string search)
    {           
        //do your stuff...
    }
}

Result:

Bob · Accepted Answer · 2022-06-07 09:18:20Z

1

For example (Razor pages):

1. Edit.cshtml

<div class="form-group">
    <label asp-for="EmailDomain.To" class="control-label"> 
    </label>
    <input asp-for="EmailDomain.To" list="textsearch" 
        class="form-control" />
    <datalist id="textsearch">
       @foreach(var item in Model.ListAccounts)
       {
          <option>@item.Text</option>
       }
    </datalist>
    <span asp-validation-for="EmailDomain.To" 
       class="text-danger"></span>
</div>

2. Edit.cshtml.cs

public SelectList ListAccounts { get; set; } = null!;
    
ListAccounts = new SelectList(_context.Accounts, 
   nameof(Account.Id), nameof(Account.Email), email.To);

answered Jun 7, 2022 at 9:18

Bob

111 bronze badge

Collectives™ on Stack Overflow

asp.net core razor dropdown list with input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related