I have already written an article on using ASP.Net AJAX Control Toolkit AutoCompleteExtender with ASP.Net ASP.Net AJAX Control Toolkit AutoCompleteExtender without using Web Services, this article is extension of my previous article.
In the above article the AutoCompleteExtender only gets the text part and not the ID from the database. But there are cases when we need both the text value and the ID value from multiple columns in the database table. Hence for such cases we need to make use of the AutoCompleteItem class of the AJAX Control Toolkit AutoCompleteExtender which is nothing but Key Value Pair or Text Value Pair.

HTML Markup
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:TextBox ID="txtCustomer" runat="server">
</asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers" MinimumPrefixLength="2"
CompletionInterval="100" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtCustomer" ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false" OnClientItemSelected = "ClientItemSelected">
</cc1:AutoCompleteExtender>
<asp:HiddenField ID="hfCustomerId" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</form>

The HTML markup contains an ASP.Net TextBox, an AJAX AutoCompleteExtender, an HiddenField that will store the ID of the record and a Button to explain how to fetch the ID and the Value server side.
 
Populating the AutoCompleteExtender
Below is the code to populate the ASP.Net AJAX Control Toolkit AutoCompleteExtender. I am making use of Microsoft NorthWind database. The complete information on connection can be found in my previous article ASP.Net AJAX Control Toolkit AutoCompleteExtender without using Web Services
C#
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> SearchCustomers(string prefixText, int count)
{
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "select CustomerId, ContactName from Customers where " +
            "ContactName like @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            cmd.Connection = conn;
            conn.Open();
            List<string> customers = new List<string>();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    string item = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(sdr["ContactName"].ToString(), sdr["CustomerId"].ToString());
                    customers.Add(item);
                }
            }
            conn.Close();
            return customers;
        }
    }
}
 
VB.Net
<System.Web.Script.Services.ScriptMethod(), _
System.Web.Services.WebMethod()> _
Public Shared Function SearchCustomers(ByVal prefixText As String, ByVal count As Integer) As List(Of String)
    Dim conn As SqlConnection = New SqlConnection
    conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim cmd As SqlCommand = New SqlCommand
    cmd.CommandText = "select CustomerId, ContactName from Customers where" & _
       " ContactName like @SearchText + '%'"
    cmd.Parameters.AddWithValue("@SearchText", prefixText)
    cmd.Connection = conn
    conn.Open()
    Dim customers As List(Of String) = New List(Of String)
    Dim sdr As SqlDataReader = cmd.ExecuteReader
    While sdr.Read
        Dim item As String = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(sdr("ContactName").ToString, sdr("CustomerId").ToString)
        customers.Add(item)
    End While
    conn.Close()
    Return customers
End Function

You will notice that this code is same as then previous article the only difference is that I am fetching multiple columns and then creating an AutoCompleteItem and then adding it to list of string.
 
Fetching and storing the ID (Value Part) Client side
In the HTML markup you will notice I have added OnClientItemSelected client side event to the AutoCompleteExtender which will be triggered when the user selects an item from the AutoComplete list. In this event we will fetch the ID part that we are sending from the server side and store it in an HiddenField control as shown below
<script type = "text/javascript">
    function ClientItemSelected(sender, e) {
        $get("<%=hfCustomerId.ClientID %>").value = e.get_value();
    }
</script>
 
 
Fetching the Selected ID and Text server side
Now on the Button Click event of the ASP.Net Button we will fetch the selected Text and ID of the customer in the following way
C#
protected void btnSubmit_Click(object sender, EventArgs e)
{
    string customerId = Request.Form[hfCustomerId.UniqueID];
    string customerName = Request.Form[txtCustomer.UniqueID];
}
 
VB.Net
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Dim customerId As String = Request.Form(hfCustomerId.UniqueID)
    Dim customerName As String = Request.Form(txtCustomer.UniqueID)
End Sub
 
 
Downloads
The complete source code in VB.Net and C# can be downloaded using the download link provided below
AutocompleteExtender-KeyValuePair.zip