Get first column value on click of any cell from Ajax AutoComplete Textbox having multiple column using jQuery in ASP.Net

Last Reply 7 days ago By kalpesh

Posted 7 days ago



i am usign this article it works fine, i only want that when user click on any row it should populate ID in textbox what needs to be change please advice

Posted 7 days ago

Just add OnClientItemSelected event of AutoCompleteExtender and make change to find the clicked cell and then find nearest Id column value.


<html xmlns="">
<head id="Head1" runat="server">
    <style type="text/css">
            font-family: Arial;
            font-size: 10pt;
            border: 1px solid #ccc;
        table th
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        table th, table td
            padding: 5px;
            border-color: #ccc;
            text-align: center;
            background-color: none !important;
            color: none !important;
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        <asp:TextBox ID="txtEmployeeSearch" runat="server"></asp:TextBox>
        <cc1:AutoCompleteExtender ServiceMethod="SearchEmployees" MinimumPrefixLength="1"
            CompletionInterval="100" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtEmployeeSearch"
            OnClientPopulated="Employees_Populated" ID="AutoCompleteExtender1" runat="server"
            OnClientItemSelected="Employees_Selected" FirstRowSelected="false">
        <script type="text/javascript" src=""></script>
        <script type="text/javascript">
            function Employees_Populated(sender, e) {
                var employees = sender.get_completionList().childNodes;
                var div = "<table>";
                div += "<tr><th>EmployeeId</th><th>FirstName</th><th>LastName</th><th>City</th><th>Country</th></tr>";
                // assigned the Id value for the td to use later in Employees_Selected event
                for (var i = 0; i < employees.length; i++) {
                    div += "<tr><td >" + employees[i].innerHTML.split('-')[0]
                        + "</td><td id=F_" + employees[i].innerHTML.split('-')[0] + ">" + employees[i].innerHTML.split('-')[1]
                        + "</td><td id=L_" + employees[i].innerHTML.split('-')[0] + ">" + employees[i].innerHTML.split('-')[2]
                        + "</td><td id=Ci_" + employees[i].innerHTML.split('-')[0] + ">" + employees[i].innerHTML.split('-')[3]
                        + "</td><td id=Co_" + employees[i].innerHTML.split('-')[0] + ">" + employees[i].innerHTML.split('-')[4] + "</td></tr>";
                div += "</table>";
                sender._completionListElement.innerHTML = div;

            function Employees_Selected(sender, e) {
                // Check only the clicked cell is Td or not
                if (e._item.tagName == "TD") {
                    // Get completionList child Node value
                    var employees = sender.get_completionList().childNodes;
                    // check each Td 
                    $.each($(employees).find("tr").find("td"), function (i, item) {
                        // check wheather td id is not blank and tdid same as clicked item td id
                        if ( == && != "") {
                            // Assign value of first closest td which is Id column value to textbox
                            return false;
                } else {
                    // clear the textbox if its not td in case


public static List<string> SearchEmployees(string prefixText, int count)
    using (SqlConnection conn = new SqlConnection())
        conn.ConnectionString = ConfigurationManager
        using (SqlCommand cmd = new SqlCommand())
            cmd.CommandText = "SELECT EmployeeId, FirstName, LastName,City,Country FROM Employees WHERE FirstName like @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            cmd.Connection = conn;
            List<string> employees = new List<string>();
            using (SqlDataReader sdr = cmd.ExecuteReader())
                while (sdr.Read())
                        sdr["EmployeeId"].ToString(), sdr["FirstName"], sdr["LastName"], sdr["City"], sdr["Country"]),
            return employees;


<System.Web.Script.Services.ScriptMethod(), _
System.Web.Services.WebMethod()> _
Public Shared Function SearchEmployees(ByVal prefixText As String, ByVal count As Integer) As List(Of String)
    Dim conn As SqlConnection = New SqlConnection
    conn.ConnectionString = ConfigurationManager _
    Dim cmd As SqlCommand = New SqlCommand
    cmd.CommandText = "select EmployeeId, FirstName, LastName,City,Country from " & _
    " Employees where FirstName like @SearchText + '%'"
    cmd.Parameters.AddWithValue("@SearchText", prefixText)
    cmd.Connection = conn
    Dim employees As List(Of String) = New List(Of String)
    Dim sdr As SqlDataReader = cmd.ExecuteReader
    While sdr.Read
        employees.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(String.Format("{0}-{1}-{2}-{3}-{4}", sdr("EmployeeId").ToString(), sdr("FirstName"), sdr("LastName"), sdr("City"), sdr("Country")), sdr("EmployeeId").ToString()))
    End While
    Return employees
End Function


I agree, here is the link: