MVC5/C# 中的可搜索下拉菜单答案

【问题标题】：Searchable Dropdown in MVC5/C#MVC5/C# 中的可搜索下拉菜单
【发布时间】：2020-10-28 02:39:00
【问题描述】：

问题：我有一个@html.DropDownList，它由我的控制器中的一个列表填充（从 ICS_Supplies 表中查询，创建一个可供订购的耗材列表）。这个列表非常大，用户抱怨加载到下拉列表中需要很长时间，并且在（排序的）列表中查找项目既麻烦又缓慢。这不能继续。

我愿意接受任何建议/示例。我在 C# 和 MVC5 以及 jscript/jquery 方面相当新 - 所以示例确实有助于我遵循。信息链接很棒，但我很难将它们整合到我的细节中，我最终会花费数天而不是数小时来试图弄清楚如何使其符合我的需求。

话虽如此。我试过Select2。我摆弄了 Select2 好几天。并且永远无法让它与@html.DropDownList 一起正常工作。我有另一个帖子寻求帮助，但我需要继续前进，因为已经好几天了，没有工作。

我还使用了以下示例：但是，我似乎无法让它与 @html.DropDownList 一起使用

这是我目前所在的位置。

控制器

 List<SelectListItem> FormsList = db.ICS_Supplies.Where(s => s.InvType == "F").Select(x => new SelectListItem { Value = x.Supplies_ID.ToString(), Text =  x.Old_ItemID + "  " + "  |  " + "  " +   " Description:  " +  x.ItemDescription, Selected = false }).DistinctBy(p => p.Text).OrderBy(p => p.Text).ToList();
 ViewBag.FormsList = new SelectList(FormsList, "Value", "Text");

原始查看代码（下拉的旧慢方式）

<div class="form-group">

@Html.Label("Forms Requested:", new { @class = "form-control" })

@Html.DropDownList("FormsList", null, "Select", new { @class = "form-control", @onkeyup = "filterFunction()" })

修改后的视图（这里我一直在尝试按照示例使我的下拉列表可搜索）。我在这里所做的只是以在线示例为例，并用我的@html.DropDownList 替换它们的中间/列表代码。我将在最后发布原始示例代码 - 以防万一。

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
@Html.DropDownList("FormsList", null, "Select", new { @class = "form-control js-example-basic-single", id = "FormsList", @onchange = "supplychange()" })

</div>

这是我的脚本代码（在这里，我只是为我自己的下拉表单列表更改了元素 ID）

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("FormsList");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
        txtValue = a[i].textContent || a[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

当我对此进行测试时，我确实得到了一个搜索按钮。单击按钮时，我会看到一个搜索框和我的下拉框。但是，他们根本不合作。如果我在搜索框中键入，它不会过滤下拉列表或跳转到该项目。它们已断开连接。

最终，我们需要在这里解决两个问题。下拉菜单加载速度非常慢。用户想要一种更快的方法来过滤下拉列表以找到他们想要的项目。我愿意以不同的方式做到这一点。 Select2 看起来很干脆，但尝试了 2 天后我无法让它发挥作用。

我是这方面的新手，所以使用@html.DropDownList 的工作示例将是理想的，所以我可以学习。

如果有帮助：这里是我跟随的示例的链接

How To Search for Items in a DropDown

【问题讨论】：

标签： javascript c# jquery asp.net-mvc-5 html-helper

【解决方案1】：

我认为您仍然应该使用 Select2。这是一个例子：


@Html.DropDownListFor(model => model.IdCategory, new SelectList(Model.categoryList, "Id", "CategoryName"), " - Choose category - ", new { @class = "form-control", @style = "color: black;" })

$("#IdCategory").select2({
   width: "100%",
   templateResult: formatResult,
   templateSelection: formatSelection,
   escapeMarkup: function (m) { return m; },
   closeOnSelect: true
  });

function formatResult(item) {
   if (item.loading) 
   {
     return 'Searching...';
   }
 return $('<div><h5 style="font-weight: bold;">'+item.text+'</h5></div> ');
}

function formatSelection(item) 
{
  if (!item.id)
     return $(item.text);
  else
     return $('<b>' + item.text + '</b>');
  }

【讨论】：