Implement jQuery TagIt AutoComplete TextBox inside ASP.Net GridView

Hi lingers,

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/jquery.tagit.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/tagit.ui-zendesk.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/js/tag-it.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "<%=ResolveUrl("Default.aspx/GetCustomers") %>",
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var sampleTags = [];
                $.each(data.d, function (i, item) {
                    sampleTags.push(item);
                });
                $(".myTags").tagit({
                    availableTags: sampleTags
                });
            },
            error: function (response) {
                alert(response.responseText);
            },
            failure: function (response) {
                alert(response.responseText);
            }
        });

        $(document).on('click', '[id*=btnGet]', function () {
            var ids = [];
            $.each($(this).closest('tr').find('.tagit-choice'), function () {
                ids.push($(this).find('input[type=hidden]').val());
            });
            $(this).closest('tr').find('[id*=hfIds]').val(ids.join(','));
        });
    });
</script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Name" ItemStyle-Width="100" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
        <asp:TemplateField HeaderText="CustomerID">
            <ItemTemplate>
                <ul id="myTags" class="myTags">
                </ul>
                <asp:HiddenField ID="hfIds" runat="server" />
                <asp:Button ID="btnGet" Text="Get Values" runat="server" OnClick="Button1_Click" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

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 (!this.IsPostBack)
    {
        GridView1.DataSource = GetData();
        GridView1.DataBind();
    }
}

[WebMethod]
public static string[] GetCustomers()
{
    List<string> customers = new List<string>();
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT [CustomerID] FROM [Customers]";
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(sdr["CustomerID"].ToString());
                }
            }
            conn.Close();
        }
    }

    return customers.ToArray();
}

protected void Button1_Click(object sender, EventArgs e)
{
    GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
    string selectedTags = (row.FindControl("hfIds") as HiddenField).Value;
    ClientScript.RegisterStartupScript(this.GetType(), "message", "alert('" + selectedTags + "')", true);
}

private DataTable GetData()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT TOP 5 * FROM Customers";
    using (SqlConnection con = new SqlConnection(conString))
    {
        SqlCommand cmd = new SqlCommand(query);
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);

                return dt;
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        GridView1.DataSource = GetData()
        GridView1.DataBind()
    End If
End Sub

<WebMethod>
Public Shared Function GetCustomers() As String()
    Dim customers 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 CustomerID FROM Customers"
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(sdr("CustomerID").ToString())
                End While
            End Using
            conn.Close()
        End Using
    End Using

    Return customers.ToArray()
End Function

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim row As GridViewRow = TryCast((TryCast(sender, Button)).NamingContainer, GridViewRow)
    Dim selectedTags As String = (TryCast(row.FindControl("hfIds"), HiddenField)).Value
    ClientScript.RegisterStartupScript(Me.GetType(), "message", "alert('" & selectedTags & "')", True)
End Sub

Private Function GetData() As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT TOP 5 * FROM Customers"
    Using con As SqlConnection = New SqlConnection(conString)
        Dim cmd As SqlCommand = New SqlCommand(query)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)

                Return dt
            End Using
        End Using
    End Using
End Function