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

Posted 2023-02-26

【中文标题】MVC5 创建带有自动完成功能的组合框

【英文标题】：MVC5 Creating ComboBox w/ Autocomplete

【发布时间】：2015-07-04 19:13:57

【问题描述】：

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

public class Color

     public int ID get;set;
     public string Name get;set;

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

//颜色控制器

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 吗？

【参考方案1】：

我最终这样做了：

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

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

【参考方案2】：

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

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

但要更深入地了解我的答案，您正在寻找的内容在 MVC5 中是开箱即用的。你需要更多... 我过去曾使用 KnockoutJs 和 AJAX 调用来创建预输入。