In page <header> add the following (Custom for my project)
<link href="<%= ResolveUrl("~/App_Themes/app/assets/css/select2.min.css") %>" rel="stylesheet" />
https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js
Or add these for default style
Note: jquery.min.js may cause some issues, remove it if not needed.
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js
Add the following script in <header>
<script>
$(document).ready(function () {
$('.js-example-basic-single').select2();
});
</script>
Add the class name to the select / DropDownList element
class="js-example-basic-single"
Enjoy the magic done by the amazin guys on select2.