how to make searchable box in dropdown list?

Ikmal Shahfiz 0
Viewed 35

I'm trying to add a search box in my dropdown list, I try with many ways but seem it not working for me. can someone assist me, please?

Thank you so much

Here my html code:


<div class="col-md-3">
                @Html.LabelFor(model => model.BankID,"Bank Name", new { @class = "control-label" })
                @Html.DropDownListFor(model => model.BankID,
                    new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "Select BankName",
                     new { id = "BankName", @class = "form-control input-sm text-uppercase" })
                @Html.ValidationMessageFor(model => model.BankID)
</div>
asp.net-mvc html
1 Answers

Out of the box, you don't get this features but you can downs select2.js Your can get it from Nugets Packages

https://select2.org/getting-started/basic-usage

For MVC, you just need add a class

@Html.DropDownListFor(model => model.BankID,
                    new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "Select BankName",
                     new { id = "BankName", @class = "form-control input-sm text-uppercase select2" })

under the script add this

@section Scripts{


<script>
     $(document).ready(function() {
            $('.select2').select2();
        });
</script>

}

This means all the dropdownlist with select2 class is searchable. Remember to reference the css and script for select2.

Yat Fei Leong0
Related