Assign AJAX AutoComplete selected value to TextBoxes using jQuery in ASP.Net

Hi nauna,

Check the below example.

HTML

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>
    <table>
        <tr>
            <td>
                Search Text:
            </td>
            <td>
                <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">
                </cc1:AutoCompleteExtender>
            </td>
        </tr>
        <tr>
            <td>
                First Name:
            </td>
            <td>
                <asp:TextBox runat="server" ID="txtFirstName" />
            </td>
        </tr>
        <tr>
            <td>
                Last Name:
            </td>
            <td>
                <asp:TextBox runat="server" ID="txtLastName" />
            </td>
        </tr>
        <tr>
            <td>
                City:
            </td>
            <td>
                <asp:TextBox runat="server" ID="txtCity" />
            </td>
        </tr>
        <tr>
            <td>
                Country:
            </td>
            <td>
                <asp:TextBox runat="server" ID="txtCountry" />
            </td>
        </tr>
    </table>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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 (item.id == e._item.id && item.id != "") {
                        // Assign value of first closest td which is Id column value to textbox
                        $("[id*=txtEmployeeSearch]").val($(this).closest('tr').find('td').eq(0).html());
                        $("[id*=txtFirstName]").val($(this).closest('tr').find('td').eq(1).html());
                        $("[id*=txtLastName]").val($(this).closest('tr').find('td').eq(2).html());
                        $("[id*=txtCity]").val($(this).closest('tr').find('td').eq(3).html());
                        $("[id*=txtCountry]").val($(this).closest('tr').find('td').eq(4).html());
                        return false;
                    }
                });
            } else {
                // clear the textbox if its not td in case
                $("[id*=txtEmployeeSearch]").val('');
            }
        }
    </script>
</div>

Namespaces

C#

using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;

Code

C#

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> SearchEmployees(string prefixText, int count)
{
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        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;
            conn.Open();
            List<string> employees = new List<string>();
            using (SqlDataReader sdr = 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()));
                }
            }
            conn.Close();
            return employees;
        }
    }
}

Screenshot