Hi @Analyst_SQL ,
You can try to use the bootstrap-select package, check the following sample: add the selectpicker
class and enable data-live-search
.
<div class="form-group">
@Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="row-fluid col-md-10">
@Html.DropDownListFor(c => c.Country, Model.SelectionList, null, new { @class = "selectpicker", data_live_search = "true" })
</div>
</div>
And add the following reference:
<!-- Latest compiled and minified CSS -->
< link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
< script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
< script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>
[Note] The above code uses the default layout, it already adds the JQuery and Bootstrap reference. If you are not using the default layout, you must add the JQuery and Bootstrap reference by yourself.
Then, the output as below:
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Dillion