无法使下拉列表可搜索

Posted 2023-04-01

【中文标题】无法使下拉列表可搜索

【英文标题】：Unable to make a dropdown list searchable

【发布时间】：2020-11-21 16:32:35

【问题描述】：

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

 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>

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

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

【参考方案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

【讨论】：

谢谢！我只是对为什么我的下拉菜单可以在程序的其他部分进行搜索感到困惑？它们的设置方式相同，您可以看到它们看起来也不同

它不识别select2，我确保脚本的顺序是正确的

没关系，我能够让它工作。该功能非常繁琐