Cannot add searchbar in dropdownlist - asp.net

Question

I created my first project in ASP.Net framework with MVC and I am trying to include a dropdownlist with searching capabilities. I am trying to create something like this, but I keep ending up with this. I have tried bootstrap selectpicker, select2, and others but I can't seem to change the style of the dropdown.
Here is my code:
<script>
$(document).ready(function () {
$('.selectpicker').selectpicker({
liveSearch: true,
showSubtext: true
});
});
</script>
<div class="form-group">
#Html.LabelFor(model => model.MaterialPN, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#*#Html.EditorFor(model => model.MaterialPNID, new { htmlAttributes = new { #class = "form-control" } })*#
#Html.DropDownListFor(model => model.MaterialPNID, ViewBag.MaterialPNListItems as IEnumerable<SelectListItem>, new
{
#class = "form-control selectpicker",
data_show_subtext = "true",
data_live_search = "true"
})
</div>
</div>
EDIT:
I created a totally new, vanilla solution to test this out. In visual studio I created a new ASP.Net C# solution with MVC, then added the Bootstrap-select library in NuGet.
public class Student
{
public int StudentId { get; set; }
[Display(Name = "Name")]
public string StudentName { get; set; }
public Gender StudentGender { get; set; }
}
public enum Gender
{
Male,
Female,
Other
}
And added a dropdown to the about page:
#using SearchableDropdown.Models
#model Student
#{
ViewBag.Title = "About";
}
<script>
$(document).ready(function () {
$('.selectpicker').selectpicker({
liveSearch: true,
showSubtext: true
});
});
</script>
<h2>#ViewBag.Title.</h2>
<h3>#ViewBag.Message</h3>
<p>Use this area to provide additional information.</p>
#Html.DropDownList("StudentGender",
new SelectList(Enum.GetValues(typeof(Gender))),
"Select Gender",
new
{
#class = "form-control selectpicker",
data_show_subtext = "true",
data_live_search = "true"
})
I am still seeing the same thing, a dropdown without clear searching capability. When I have the dropdown selected and start typing, it will choose the item that starts with the letters that I type but this is not true searching capability.

Answer 1

Use below link
https://select2.org/getting-started/basic-usage#multi-select-boxes-pillbox
HTML
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
JS
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});