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

Question

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

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

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

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

这是我目前所在的位置。

Controller

 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 的工作示例将是理想的，所以我可以学习。

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

如何在下拉列表中搜索项目

Answer 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>');
  }