在DropDownListFor上添加搜索function

我想知道是否有人可以帮我解决我面临的问题。 我正在尝试使用razor在DropDownListFor上创建搜索。

private List LoadStockitems() { List selectItems = new List(); foreach (var role in GetStockItemsFromDB()) { SelectListItem listItem = new SelectListItem(); listItem.Value = role.StockCode; listItem.Text = role.Description; selectItems.Add(listItem); } return selectItems; } ViewBag.AllStockList = LoadStockitems(); 

视图

 @Html.DropDownListFor(x => x.StockCode, (IEnumerable)ViewBag.AllStockList, new { @class = "form-control", @Value = @Model.Description, onchange = "this.form.submit();" }) 

我可以使用Html做到这一点，但我无法弄清楚如何使用razor。 在HTML中，

 @using (Html.BeginForm("Hello", "Hello")) { 
  Select A Customer   @foreach (var Customer in @Model.CustomerSelect) {  @Customer.Name  }   
 } 

如何在DropDownListFor上创建搜索，是否有像su​​btext属性…？

Answer 1

您正在使用名为bootstrap-select的引导程序插件。 要在razor视图中使用它，请执行此操作。

 @Html.DropDownListFor(x => x.StockCode, (IEnumerable)ViewBag.AllStockList, new { @class = "form-control selectpicker", @Value = @Model.Description, onchange = "this.form.submit();" }) 

除了添加类selectpicker之外，不要更改剃刀视图中的任何内容。 现在通过像这样在JavaScript中设置选项来初始化插件。

 $(document).ready(function() { $('.selectpicker').selectpicker({ liveSearch: true, showSubtext: true }); }); 

演示： http ： //jsfiddle.net/codeandcloud/a5r2vyu2/1/
文档： https ： //silviomoreto.github.io/bootstrap-select/options/

要在razor语法中添加data- *属性，请将_替换为_ 。

 @Html.DropDownListFor(x => x.StockCode, (IEnumerable)ViewBag.AllStockList, new { @class = "form-control selectpicker", @Value = @Model.Description, onchange = "this.form.submit();", data_show_subtext="true", data_live_search="true" }) 

阅读本文和此内容 。