[Solved] AutoComplete in ASP.Net GridView row not working when binding using jQuery AJAX

Hi ishi12.shah,

You need to call the SearchText function inside the OnSuccess function after the values are assigned to the TextBox in GridView row.

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

<asp:GridView runat="server" ID="gvCustomers" AutoGenerateColumns="false" Width="250"
    ShowFooter="true" ShowHeaderWhenEmpty="true" ShowHeader="true" CssClass="table table-responsive">
    <Columns>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox ID="txtName" CssClass="form-control name" runat="server" Text='<%# Eval("ContactName") %>' Width="200px"></asp:TextBox>
                <asp:HiddenField ID="hfId" runat="server" Value='<%# Eval("CustomerID") %>' />
                <asp:Button ID="btnGet" Text="Get" runat="server" CssClass="btn btn-default" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    media="screen" />
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
<link rel="Stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css" />
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });

        $('[id*=btnGet]').click(function () {
            alert($(this).closest('tr').find('[id*=hfId]').val());
            return false;
        });
    });

    function SearchText(ele, hid) {
        var hidden = $(hid);
        $(ele).typeahead({
            hint: true,
            highlight: true,
            minLength: 1,
            source: function (request, response) {
                $.ajax({
                    url: 'Default.aspx/GetContactNames',
                    data: "{ 'prefixText': '" + request + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        items = [];
                        map = {};
                        $.each(data.d, function (i, item) {
                            var id = item.split('-')[1];
                            var name = item.split('-')[0];
                            map[name] = { id: id, name: name };
                            items.push(name);
                        });
                        response(items);
                        $(".dropdown-menu").css("height", "auto");
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            updater: function (item) {
                $(hidden).val(map[item].id);
                return item;
            }
        });
    }
    function OnSuccess(result) {
        var row;
        var customers = $($.parseXML(result.d)).find("Table");
        if (row == null) {
            row = $("[id*=gvCustomers] tr:last-child").prev().clone(true);
        }
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();

        $.each(customers, function () {
            $(row[0]).find('[id*=hfId]').val($(this).find("CustomerID").text());
            $(row[0]).find('.name').val($(this).find("ContactName").text());
            $("[id*=gvCustomers] tbody").append($(row[0]));
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        });

        $.each($('.name'), function (index, item) {
            SearchText($(item), $(item).closest('tr').find('input[type=hidden]'));
        });
    };
</script>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add("CustomerID");
        dummy.Columns.Add("ContactName");
        dummy.Rows.Add();
        gvCustomers.DataSource = dummy;
        gvCustomers.DataBind();
    }
}

[WebMethod]
public static string[] GetContactNames(string prefixText)
{
    List<string> names = new List<string>();
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT ContactName,CustomerId from Customers WHERE ContactName LIKE @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    names.Add(string.Format("{0}-{1}",
                        sdr["ContactName"],
                        sdr["CustomerId"]));
                }
            }
            conn.Close();
        }
    }
    return names.ToArray();
}

[WebMethod]
public static string GetCustomers()
{
    string query = "SELECT TOP 3 CustomerID,ContactName FROM Customers";
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds);
                    return ds.GetXml();
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dummy As DataTable = New DataTable()
        dummy.Columns.Add("CustomerID")
        dummy.Columns.Add("ContactName")
        dummy.Rows.Add()
        gvCustomers.DataSource = dummy
        gvCustomers.DataBind()
    End If
End Sub

<WebMethod>
Public Shared Function GetContactNames(ByVal prefixText As String) As String()
    Dim names As List(Of String) = New List(Of String)()
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand()
            cmd.CommandText = "SELECT ContactName,CustomerId from Customers WHERE ContactName LIKE @SearchText + '%'"
            cmd.Parameters.AddWithValue("@SearchText", prefixText)
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    names.Add(String.Format("{0}-{1}", sdr("ContactName"), sdr("CustomerId")))
                End While
            End Using
            conn.Close()
        End Using
    End Using

    Return names.ToArray()
End Function

<WebMethod>
Public Shared Function GetCustomers() As String
    Dim query As String = "SELECT TOP 3 CustomerID,ContactName FROM Customers"
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(strConnString)
        Using cmd As SqlCommand = New SqlCommand(query)
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using ds As DataSet = New DataSet()
                    sda.Fill(ds)
                    Return ds.GetXml()
                End Using
            End Using
        End Using
    End Using
End Function

Screenshot