asp. net выпадающий список основной бритвы с вводом

Question

Я ищу раскрывающийся список с возможностью ввода значения. Допустим, у нас есть список элементов по умолчанию, но пользователь может ввести свой собственный.

У меня есть следующий код в контроллере

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

и просмотр

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

, но в этом случае пользователь может выбрать только значение из выпадающего списка. Как разрешить пользовательский ввод? Я не могу гуглить ответ где угодно.

Answer 1

Как сказал @Yegor, вы можете использовать автозаполнение, вот рабочая демонстрация:

1.Модель:

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

2.Просмотр:

<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.Контроллер:

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

Результат: