how to implementing Ajax autocompleteextender textbox in GridView using Ajax control toolkit in ASP.NET

In this article I will explain how to implementing Ajax autocompleteextender textbox in Item template and footer template on GridView using Ajax control toolkit in ASP.NET, for this we need to create a web service which calls the method to fetch data from database and display results as suggestions for TextBox. Add a new webservice to the project and name it AutoComplete.asmx or whatever you want, in the code behind of the web service we write methods to get records from database and a web method called GetCompletionListGrid which takes text entered in textbox as parameter to search database, this method is automatically called whenever user types anything in the textbox.

First you need to establish a DataBase connection in web.config file

<connectionStrings>

<add name="connectionString" connectionString="Data Source=LocalHost;uid=sa1;password=Con@123;Initial Catalog=practice"/>

</connectionStrings>

After that you need to design aspx page. Below is the sample code for Page design

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Services>

<asp:ServiceReference Path="AutoComplete.asmx" />

</Services>

</asp:ScriptManager>

<table>

<tr>

<td>

<div style="width: 100%; height: 500px; overflow: scroll">

<asp:GridView ID="gvJournalVoucher" runat="server" AutoGenerateColumns="false" ShowFooter="true">

<Columns>

<asp:TemplateField HeaderText="Name" SortExpression="Name">

<ItemTemplate>

<asp:TextBox ID="txtAccountDescriptionIT" Width="400px" runat="server" Text='<%#Bind("Accounts_Description") %>'></asp:TextBox>

<ajaxtoolkit:AutoCompleteExtender

runat="server"

ID="autoComplete1"

TargetControlID="txtAccountDescriptionIT"

ServicePath="AutoComplete.asmx"

ServiceMethod="GetCompletionListForGrid"

MinimumPrefixLength="1"

CompletionInterval="1"

EnableCaching="true"

CompletionSetCount="1" CompletionListCssClass="completionList"

CompletionListHighlightedItemCssClass="itemHighlighted"

CompletionListItemCssClass="listItem" />

</ItemTemplate>

<FooterTemplate>

<asp:TextBox Width="400px" runat="server" ID="txtAccountDescriptionFT" CssClass="autosuggestFT">

</asp:TextBox>

<ajaxtoolkit:AutoCompleteExtender

runat="server"

ID="autoComplete1"

TargetControlID="txtAccountDescriptionFT"

ServicePath="AutoComplete.asmx"

ServiceMethod="GetCompletionListForGrid"

MinimumPrefixLength="1"

CompletionInterval="1"

EnableCaching="true"

CompletionSetCount="1" CompletionListCssClass="completionList"

CompletionListHighlightedItemCssClass="itemHighlighted"

CompletionListItemCssClass="listItem" />

</FooterTemplate>

</asp:TemplateField>

</Columns>

<HeaderStyle HorizontalAlign="Center" BorderWidth="1px" BackColor="Maroon" ForeColor="White" />

</asp:GridView>

</div>

</td>

</tr>

</table>

Below code is used for binding data to gridview.

using System;

using System.Data;

using System.Data.SqlClient;

public partial class JournalVoucher1 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

SqlCommand drCommand1;

SqlConnection conHiAll = new SqlConnection("server=localhost;database=DBNAME;uid=sa1;pwd=PASSWORD@123;MultipleActiveResultSets=True");

conHiAll.Open();

drCommand1 = new SqlCommand("select * from Accounts", conHiAll);

SqlDataAdapter da = new SqlDataAdapter(drCommand1);

DataTable dt = new DataTable();

da.Fill(dt); 

}

}

}

Following is the code for web service.

using System.Collections.Generic;

using System.Web.Services;

using System.Data;

using System.Collections;

using MISWeb;

using System.Data.SqlClient;

[WebService]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class AutoComplete : WebService

{

public AutoComplete()

{

}

[WebMethod]

public string[] GetCompletionListForGrid(string prefixText, int count)

{

DataTable dt = GetRecords(prefixText);

List<string> items = new List<string>(count); 

for (int i = 0; i < dt.Rows.Count; i++)

{

string strName = dt.Rows[i][0].ToString();

items.Add(strName);

}

return items.ToArray();

}

public DataTable GetRecords(string strName)

{

SqlCommand drCommand;

SqlConnection conHiAll = new SqlConnection("server=localhost;database=DBNAME;uid=sa1;pwd=CON@123;MultipleActiveResultSets=True");

conHiAll.Open();

drCommand = new SqlCommand("select Accounts_Description from Accounts where Accounts_Description like '" + strName + "%'", conHiAll);

SqlDataAdapter da = new SqlDataAdapter(drCommand);

DataTable dt = new DataTable();

da.Fill(dt);

return dt;

}

}

Output: