无法使下拉列表可搜索

Question

我的视图页面中有一个下拉列表，但它不是可搜索的下拉列表，这就是我填充下拉值的方式

 public ActionResult SpecialOrderSummary(int? id)
        {
            ItemViewModel model = (ItemViewModel)TempData["model"];
            TempData.Keep("model");
           
            var part = (from i in db.Parts.Where(x => x.deleted == false)
                        select new
                        {
                            partID = i.ID,
                            partName = i.PartID  + i.Name
                        }).OrderBy(x => x.partName).ToList();
                   
            ViewBag.PartID = new SelectList(part, "partID", "partName");
                   
            return View(model);
        }

这是我在视图中的设置方式

<div class="col-md-2">
            @Html.DropDownList("PartID", null, "-- Select --", htmlAttributes: new { @class = "form-control chosen-select Part-select" })
</div>

我已在系统的其他部分以相同的方式设置它，并且它正确地使下拉列表可搜索，但它不适用于这种情况。下拉列表看起来也与通常看起来不同，通常看起来像这样

但目前我的下拉菜单看起来像这样

Answer 1

默认情况下，Asp.Net 不支持可搜索的下拉菜单。您可以使用 select2 下拉菜单，它是普通下拉菜单的包装。

试试这个：

第 1 步： 导入必要的 css 和脚本：

 <!-- Bootstrap css-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

 <!-- Select2 css-->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  

第 2 步：您的实际下拉菜单

@Html.DropDownList("PartID", null, "-- Select --", htmlAttributes: new { @class = "form-control chosen-select Part-select" })

第 3 步：使用 jquery 在页面加载时绑定可搜索的 select2 下拉菜单

 <!-- JQuery script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Select2 script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

 $(document).ready(function(){
   $('.chosen-select').select2({     // .chosen-select is class name(from your dropdown)
            placeholder: "Select"
        });
  });

示例输出：

注意事项：

• 脚本的顺序非常重要。提到我在这里提到的他们的订单。
• 最佳做法是提及上面的样式链接（在 head 标签内）和下面的脚本（在您的 body 标签内）
• 如果您卡在这里，请点击链接：Codepen-Searchable Dropdown demo