MVC5 创建带有自动完成功能的 ComboBox

Question

我有一个查找 table 具有以下属性：ID、名称

public class Color
{
     public int ID {get;set;}
     public string Name {get;set;}
}

我想创建一个 ComboBox 让我 select 一种颜色，或者如果文本不在列表中则创建一个新颜色。

//颜色控制器

public ActionResult Create()
{
     ViewBag.ColorID = new SelectList(db.Colors,"ID","Name");
     return View();
}

//创建视图

@model Color

@using(Html.BeginForm())
{
<dl>
   <dt>
        @Html.LabelFor(m=>m.Name)
   </dt>
   <dd>
        @Html.DropDownList("ColorID", null, "--Select Color --", new {})
   </dd>
</dl>
}

此时我有一个下拉菜单，但由于它呈现为 Select 我无法编辑文本。 MVC5 是否有任何开箱即用的东西可以让我从这一点开始创建 ComboBox？

Answer 1

这将创建一个 select 列表（组合框）

@Html.DropDownList("ColorID", null, "--Select Color --", new { size = "5"})

但为了更深入地回答我的问题，您正在寻找的内容在 MVC5 中不可用。你需要更多... 我过去曾使用 KnockoutJs 和 AJAX 调用来创建提前输入。

Answer 2

我最终这样做了：

 @model Color
 .....

 @using(Html.BeginForm())
 {
    @Html.Hidden("ID")
    <input type="text" name="Name" list="colors" 
                       class="form-control"  id="co" value="@Model.Name" />
    <datalist id="colors">
    @foreach (var item in ViewBag.AttorneyOfficeID)
    {
      <option value="@item.Text" data-id="@item.Value" />
    }
    </datalist>
 }

我创建了一个隐藏的 ID 来保存所选的选项，并使用下面的更改脚本设置它。

<script>
$('#co').on('change', function () {
   var id = $("option").filter("[value='" + $('#co').val() + "']").data("id");
   $("[name='ID']").val(id);
};
</script>

这已经完成了工作，但我会保留这个问题，因为我愿意接受建议。

MVC5 创建带有自动完成功能的 ComboBox

MVC5 Creating ComboBox w/ Autocomplete

c#

asp.net-mvc

combobox

view

razor