Implement AutoComplete Search Box inside DropDownList using jQuery in ASP.Net

Hi merictokatlio...,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<form id="form1" runat="server">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <label>Select</label>
                <select class="form-control select2" runat="server" id="ddlCustomers">
                </select>
                <asp:Button runat="server" CssClass="btn btn-primary" Text="Submit" OnClick="OnSubmit" />
            </div>
        </div>
        <asp:HiddenField ID="hfCustomerId" runat="server" />
    </div>
</form>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<style type="text/css">
    .select2-container .select2-selection--single {
        height: 34px !important;
    }

    .select2-container--default .select2-selection--single {
        border: 1px solid #ccc !important;
        border-radius: 0px !important;
    }
</style>
<script type="text/javascript">
    $(function () {
        $('.select2').select2();
        $('.select2').on('change', function () {
            $('[id*=hfCustomerId]').val($(this).val());
        });
    });
</script>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT CustomerID,ContactName FROM Customers ORDER BY ContactName";
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand(query);
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    ddlCustomers.DataTextField = "ContactName";
                    ddlCustomers.DataValueField = "CustomerID";
                    ddlCustomers.DataSource = dt;
                    ddlCustomers.DataBind();
                }
            }
        }
    }
}

protected void OnSubmit(object sender, EventArgs e)
{
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('CustomerID : " + ddlCustomers.Value + "')", true);
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim query As String = "SELECT CustomerID,ContactName FROM Customers ORDER BY ContactName"
        Using con As SqlConnection = New SqlConnection(conString)
            Dim cmd As SqlCommand = New SqlCommand(query)
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    ddlCustomers.DataTextField = "ContactName"
                    ddlCustomers.DataValueField = "CustomerID"
                    ddlCustomers.DataSource = dt
                    ddlCustomers.DataBind()
                End Using
            End Using
        End Using
    End If
End Sub

Protected Sub OnSubmit(ByVal sender As Object, ByVal e As EventArgs)
    ClientScript.RegisterClientScriptBlock(Me.GetType(), "", "alert('CustomerID : " & ddlCustomers.Value & "')", True)
End Sub

Screenshot