DropDownList with search

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.

,,

Leave a Reply

Your email address will not be published. Required fields are marked *