Searchable Dropdown in MVC5/C#

Question

Problem: I have an @html.DropDownList that is populated by a List in my controller (query from ICS_Supplies table, creating a list of supplies available for order). This list is pretty large and users are complaining that it takes a significant time to load into the dropdown, and finding the item in the (sorted) list is cumbersome and slow. This can't go on.

I am open to any suggestions/examples. I am fairly new in C# and MVC5 and jscript/jquery - so examples do help me follow. Links to information are great, but I have a hard time incorporating them into my specifics and I end up spending days instead of hours trying to figure out how to make it fit my needs.

That being said. I have tried Select2. I fiddled with Select2 for days. And could never get it to work properly with @html.DropDownList. I had another post seeking help with that, but I need to move on because it's been days and not working.

I have also used the following example: But again, I can't seem to get it working with the @html.DropDownList

Here is where I am currently.

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");

Original View Code (The old slow way for dropdown)

<div class="form-group">

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

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

Modified View (Here I have been trying to follow an example to make my dropdown searchable). All I did here is take the example online, and replace their middle/list code with my @html.DropDownList. I will post the original example code at the end - in case it matters.

<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>

And here is my script code (Here, I simply changed the element ID's for my own dropdown FormsList)

<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";
        }
    }
}

When I test this, I do get a search button. When button clicks, I see a search box and my drop down box. But, they don't work together at all. If I type in the search box, it does not filter the dropdownlist or jump to the item. They are disconnected.

Ultimately, we have two issues I need to resolve here. The Dropdown is super slow to load. And users want a faster way to filter the dropddownlist to find the item they desire. I am open to doing this a different way. Select2 seemed pretty cut and dry, but I could not get that working after 2 days of trying.

I am new at this, so a working example using @html.DropDownList would be ideal, so I can learn.

IF it helps: Here is the link to the example I was following along with

How To Search for Items in a DropDown

Answer 1

I think you should still use Select2. Here is an example:

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