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