Select2 example in HTML

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Here we use the searching property of select box using select2.
First create your MVC web application and then create your controller and view. After that follow the below steps...

Step-1:

First install jquery and select2 file :
⦁ Install-Package jQuery -Version 1.11.3
⦁ Install-Package Select2.js -Version 4.0.1
After installation :

Step-2:

Add reference to your page:
    <link href="~/Content/Autocomplete/Content/css/select2.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Content/Autocomplete/Scripts/select2.min.js"></script>

Step-3:

Write select box  in your view page...

<select class="select2" style="width:50%;"  id="ddltest">
   <option value="0">select</option>
    <option value="1">111</option>
    <option value="2">222</option>
    <option value="3">333</option>
</select>

mention class name as 'select2'.

Step-4:

Write this following script in your view page...

    <script>
        $(document).ready(function () {
//initiallize search for select tag
            $('.select2').select2();
        })
    </script>

For to Select or Change value of select box, write following code in your script or wherever you required.

$('#ddltest').val('1').trigger('change');

Output:

In this way, select2 package is used for searching purpose.