Create select 2 dropdownlist in asp.net c#

What is select 2?

Select2 provides you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other features.

It supports following features 

In your language

Select2 comes with support for RTL environments,searching with diacritics and over 40 languages built-in.

Remote data support

Using AJAX you can efficiently search large lists of items.

Fits in with your theme

Fully skinnable, CSS built with Sass and an optional theme for Bootstrap 3.

Fully extensible

The plugin system allows you to easily customize Select2 to work exactly how you want it to.

Dynamic item creation

Allow users to type in a new option and add it on the fly.

Full browser support

Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.

Let’s start with select 2. (Simply follow the steps.)

Step 1: Create a new asp.net web form project from your Visual Studio. And download Select2 library’s from Manage NuGet Packages.

Step 2: You can see the downloaded files in your Solution explorer.

Step 3: Now place following HTML code in your Default.aspx page.

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15	<script src="Scripts/select2.min.js"></script>   <link href="Content/css/select2.min.css" rel="stylesheet" />   <script type="text/javascript">       $(document).ready(function () {                      $("#<%=DropDownList1.ClientID%>").select2({               placeholder: "Select Item",               allowClear: true           });       });   </script>   <div class="row">       <br />       <br />       <asp:DropDownList ID="DropDownList1" runat="server"  CssClass="form-control input-sm"></asp:DropDownList>   </div>

<script src="Scripts/select2.min.js"></script>
  <link href="Content/css/select2.min.css" rel="stylesheet" />
  <script type="text/javascript">
      $(document).ready(function () {            
          $("#<%=DropDownList1.ClientID%>").select2({
              placeholder: "Select Item",
              allowClear: true
          });
      });
  </script>
  <div class="row">
      <br />
      <br />
      <asp:DropDownList ID="DropDownList1" runat="server"  CssClass="form-control input-sm"></asp:DropDownList>
  </div>

Step 4: Now bind the dropdown like below C# code.

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51	using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication5 {     public partial class _Default : Page     {         protected void Page_Load(object sender, EventArgs e)         {             if (!IsPostBack)             {                 DropDownList1.DataSource = GetData();                 DropDownList1.DataValueField = "Id";                 DropDownList1.DataTextField = "Item";                                DropDownList1.DataBind();                            }         }         public DataTable GetData()         {             DataTable dt = new DataTable();             //Add columns to DataTable.             dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id"), new DataColumn("Item") });             //Set AutoIncrement True for the First Column.             dt.Columns["Id"].AutoIncrement = true;             //Set the Starting or Seed value.             dt.Columns["Id"].AutoIncrementSeed = 1;             //Set the Increment value.             dt.Columns["Id"].AutoIncrementStep = 1;             //Add rows to DataTable.             for (int i = 1; i < 20; i++)             {                 dt.Rows.Add(null, "Item " + i.ToString());             }             return dt;         }     } }

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication5
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownList1.DataSource = GetData();
                DropDownList1.DataValueField = "Id";
                DropDownList1.DataTextField = "Item";                
                DropDownList1.DataBind();                
            }

        }
        public DataTable GetData()
        {
            DataTable dt = new DataTable();

            //Add columns to DataTable.
            dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id"), new DataColumn("Item") });

            //Set AutoIncrement True for the First Column.
            dt.Columns["Id"].AutoIncrement = true;

            //Set the Starting or Seed value.
            dt.Columns["Id"].AutoIncrementSeed = 1;

            //Set the Increment value.
            dt.Columns["Id"].AutoIncrementStep = 1;

            //Add rows to DataTable.

            for (int i = 1; i < 20; i++)
            {
                dt.Rows.Add(null, "Item " + i.ToString());
            }


            return dt;
        }
    }
}

Now run the application, you can see following screen in your browser.

Note: Select2 library is required to perform this example.