title: How to add Search Functionality to a dropdownlist in asp.net using Select2.js
body: <p>I have a Project with a MasterPage. I added a content page name AddEmployeeDetail.aspx which is here</p>
  <pre><code>&lt;%@ Page Title=&quot;&quot; Language=&quot;C#&quot; MasterPageFile=&quot;~/Site.Master&quot; AutoEventWireup=&quot;true&quot; CodeFile=&quot;AddEmployeeDetail.aspx.cs&quot; Inherits=&quot;DeceasedSystem.AddEmployeeDetail&quot; %&gt;
  </code></pre>
  <p>Inside the content page AddEmployeeDetail.aspx i have a dropdownlist called ddEmployeeName. On page load, this dropdownlist is populated from the database with EmployeeName. Here is the HTML</p>
  <pre><code>&lt;div class=&quot;form-group row&quot;&gt;
      &lt;label for=&quot;name&quot; class=&quot;col-4 col-form-label&quot;&gt;Employee Name&lt;/label&gt;
      &lt;div class=&quot;col-8&quot;&gt;
          &lt;asp:DropDownList ID=&quot;ddEmployeeName&quot; runat=&quot;server&quot; class=&quot;form-control here&quot;&gt;&lt;/asp:DropDownList&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is the .cs file code</p>
  <pre><code>protected void Page_Load(object sender, EventArgs e)
  {
      ddEmployeeName.DataSource = LoadComboBoxEmployeeName();
      ddEmployeeName.DataTextField = &quot;Name&quot;;
      ddEmployeeName.DataValueField = &quot;Id&quot;;
      ddEmployeeName.DataBind();
      ddEmployeeName.Items.Insert(0, new ListItem(&quot;--Select--&quot;, &quot;0&quot;));
  }
  
  string CS = ConfigurationManager.ConnectionStrings[&quot;DeceasedDBCS&quot;].ConnectionString;
  
  //Load ComboBox Company
  private DataTable LoadComboBoxEmployeeName()
  {
      DataTable dtFatherName = new DataTable();
      using (SqlConnection con = new SqlConnection(CS))
      {
          using (SqlCommand cmd = new SqlCommand(&quot;SELECT Id, Name FROM TableEmployeeMaster&quot;, con))
          {
              cmd.CommandType = CommandType.Text;
              con.Open();
              SqlDataReader r = cmd.ExecuteReader();
              dtFatherName.Load(r);
          }
      }
      
      return dtFatherName;
  }
  </code></pre>
  <p>I also add a script file in this AddEmployeeDetail.aspx content page which is:</p>
  <pre><code> &lt;script&gt;
      $(document).ready(function () {
       $(&quot;#ddEmployeeName&quot;).select2({
          placeholder: &quot;Select an option&quot;,
          allowClear: true
       });
   });
  &lt;/script&gt;
  </code></pre>
  <p>and also a link of Jquery.js and Select2.js files which is</p>
  <pre><code>&lt;script src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;js/select2.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Both the files are in content Placeholder.
  Now I want, After the page load and data comes to the dropdownlist, when a user clicks on the dropdownlist, he/she should be able to search for any specific data and then select that. In short, I want to add search functionality to dropdownlist. So far what have I done, it is not working. It loads data but doesn't add the search functionality. I don't know what is the problem. And also, will it work if added the scripts and script files in MasterPage instead of the content Page? I am using BS4.
  Help me Please.</p>