Ajax AutoComplete Extender Example In Asp.Net

In this tutorial i will explain how to use Ajax AutoComplete Extender Example In Asp.Net.It will work like google Search box, when you start typing it will search words from database according to prefix of word you typed in textbox.

We can use Ajax autocomplete extender to any textbox to implement this and after assign autocomplete extender to textbox and type more content than the specified minimum word length, a popup will show words or phrases starting with that value. Here we are implementing autoComplete extender to fetch data from the database through a Webservice.

Design View:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Hightechnology Ajax Auto Complete</title>
<style type="text/css">
.auto-style1 {
width: 900px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<table align="center" cellpadding="2" class="auto-style1">
<tr>
<td colspan="2">
<h1>Ajax Auto Complete Extender</h1>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" ServicePath="WebService.asmx" 
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="Countries">
</asp:AutoCompleteExtender> 
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Webservice Code :

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
public WebService()
{
//Uncomment the following line if using designed components 
//InitializeComponent(); 
}
[WebMethod]
public List<string> Countries(string prefixText)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("select * from Country_list where Country like @country+'%'", con);
cmd.Parameters.AddWithValue("@country", prefixText);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
List<string> CountryNames = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
CountryNames.Add(dt.Rows[i][1].ToString());
}
return CountryNames;
}
}