MVC5正在创建带自动完成功能的组合框

本文关键字：功能 成功 组合 创建 MVC5 | 更新日期: 2023-09-27 18:01:07

我有一个查找表，它有以下属性：ID，Name

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

我想创建一个组合框，让我选择一种颜色，或者如果文本不在列表中，则创建一个新的颜色。

//彩色控制器

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

在这一点上，我有一个下拉列表，但由于它呈现为"选择"，我无法编辑文本。MVC5有什么开箱即用的东西可以让我从这一点创建一个组合框吗？

MVC5正在创建带自动完成功能的组合框

我最终做了这个：

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

这已经完成了任务，但我将保留这个问题，因为我愿意接受建议。

这将创建一个选择列表(组合框(

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

但为了更深入地了解我的答案，您正在寻找的内容在MVC5中是不现成的。你需要更多。。。我过去曾使用KnockoutJs和AJAX调用来创建一个提前类型。

相关文章：