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

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

结果：

Answer 2

例如（剃刀页面）：

1.编辑.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. 编辑.cshtml.cs

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