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

Last Reply 9 months ago By dharmendr

Posted 9 months ago

hello, i have following autocomplete script is working fine.

the change i want is that i want first value of autocomplete to be bind with Textbox1 then second value to be bind with Textbox2 and third value to be bind with textbox3

in current it is collecting first closet value and asssing to textbox1 i want to bind the first value to textbox 1 second value to textbox2 and third value to textbox3

        <script type="text/javascript">
            function Employees_Populated1(sender, e) {
                var employees = sender.get_completionList().childNodes;
                var div = "<table width='1000'>";
                div += "<tr><th>EmployeeId</th><th>FirstName</th><th>LastName</th><th>Second Last Name</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_Selected1(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*=TextBox1]").val($(this).closest('tr').find('td').html());
                            return false;
                        }
                    });
                } else {
                    // clear the textbox if its not td in case
                    $("[id*=TextBox1]").val('');
                }
            }
        </script>

 

 

You are viewing reply posted by: dharmendr 9 months ago.
Posted 9 months ago

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