title: How can i populate and optimize DropDownList from WebService using Select2.js
body: <p>I'm working on <em>customer selection</em> module that will <code>autocomplete</code> while typing. It seems that <code>Select2.js</code> would do the job, I already managed to populate my <code>dropdownlist</code> but on the back-end (<code>.cs</code> file) with a simple data binding. </p>
  
  <p>The problem is, I am only working with a sample data of 15 customers so the performance is just fine, i am expecting an actual data of almost 2000 customers so just by binding would messed up the performance.</p>
  
  <p>here is my code for the binding event and implementation of <code>select2.js</code></p>
  
  <p><em><code>.aspx</code> file:</em></p>
  
  <pre><code>&lt;asp:DropDownList runat="server" ID="ddlCustomers" CssClass="form-control" async=""&gt;
     &lt;asp:ListItem&gt;&lt;/asp:ListItem&gt;
  &lt;/asp:DropDownList&gt;
  </code></pre>
  
  <p><em><code>.cs</code> file:</em></p>
  
  <pre><code>protected void BindDropDownCustomers()
  {
      DataTable dt = SharedClass.getAPI("CustomerProfile_All"); //Returns Data from Webservice
      DataColumn newColumn = new DataColumn();
  
      //just formating the display
      newColumn.ColumnName = "FullName";
      newColumn.DataType = System.Type.GetType("System.String");
      newColumn.Expression = "Cust_Last_Name+', '+Cust_First_Name";
      dt.Columns.Add(newColumn);
      ddlCustomers.DataTextField = "FullName";
      ddlCustomers.DataValueField = "SmartCardID";
      ddlCustomers.DataSource = dt.DefaultView;
      ddlCustomers.DataBind();
      ddlCustomers.Items.Insert(0, new ListItem("Select Customer", ""));
  }
  </code></pre>
  
  <p><em><code>select2.js</code> script:</em></p>
  
  <pre><code>$('#&lt;%= ddlCustomers.ClientID %&gt;').select2({
     placeholder: "Select customer",
     minimumResultsForSearch: 2,
     minimumInputLength: 3,
     allowClear: true
  });
  </code></pre>
  
  <p>I want something like, after the user enters a minimum of 3 characters, a query will be executed and get all related data that will populate the <code>dropdownlist</code> and limit or optimize the display at the same time.</p>