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

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

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:

asp.net core razor dropdown list with input

2 Answers