带有输入的 asp.net core razor 下拉列表答案

【问题标题】：asp.net core razor dropdown list with input带有输入的 asp.net core razor 下拉列表
【发布时间】：2020-03-02 10:32:50
【问题描述】：

我正在寻找可以输入值的下拉列表。假设有一个默认的项目列表，但用户可以输入自己的。

我在控制器中有以下代码

 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>

但在这种情况下，用户只能从下拉列表中选择值。如何允许自定义输入？我无法在任何地方搜索答案。

【问题讨论】：

这个控件被命名为自动完成
这与c#或MVC无关。您需要使用某种客户端 JS 组件来支持它，因为标准选择不允许用户输入。有很多这样的组件可用。
正如@YegorAndrosov 所说，这种类型的功能可以通过自动完成控件来实现。虽然，它也被称为组合框。在搜索有助于解决此问题的 JavaScript 组件时，使用这两个关键字之一应该可以帮助您快速识别选项。
Select2

标签： c# asp.net-mvc asp.net-core asp.net-core-mvc

【解决方案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...
    }
}

结果：

【讨论】：