We can do this task using so many methods. But here I m going to show you using “Ajax Enabled WCF”.
It is very easy and flexible to use. WCF also give good performance as compare to web service.
Note: If you are new to “Ajax enable Wcf” please see my this post
Here are some few steps to do this task
Step1: Create the “Ajax enable Wcf” and write method like this
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;[ServiceContract(Namespace = “”)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string[] GetEmpInfoWith_WCF(string prefixText)
{
SqlConnection con = new SqlConnection(“Data Source=.;Initial Catalog=Test;Integrated Security=True”);string sql = “Select EmpName from tblEmp Where EmpName like @EmpName”;
SqlDataAdapter da = new SqlDataAdapter(sql, con);
da.SelectCommand.Parameters.Add(“@EmpName”, SqlDbType.VarChar, 50).Value = prefixText + “%”;
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
string[] items = new string[dt.Rows.Count];
int i = 0;
foreach (DataRow dr in dt.Rows)
{
items.SetValue(dr[“EmpName”].ToString(), i);
i++;
}
return items;
}
else
{string[] items = new string[1];
items.SetValue(“No EmpName Found”, 0);
return items;
}
}
}
Step2: Compile the Service
Step3: Take Textbox, AutoCompleteExtender and Scriptmanager control in default.aspx
Step4:Configure the AutoCompleteExtender like this
<cc1:AutoCompleteExtender runat="server"
ID="AutoComplete1"
BehaviorID="autoComplete"
TargetControlID="TextBox1"
ServicePath="Service.svc"
ServiceMethod="GetEmpInfoWith_WCF"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="true"
CompletionSetCount="12"
CompletionListCssClass="AutoExtender"
CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass
="AutoExtenderHighlight"
CompletionListElementID="divwidth"/>
Complete Aspx page is like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete_WCF.aspx.cs" Inherits="AutoComplete_WCF" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title><style type="text/css">
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
border: solid 1px #006699;
line-height: 20px;
padding: 10px;
background-color: White;
margin-left:10px;
}
.AutoExtenderList
{
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
#divwidth
{
width: 150px !important;
}
#divwidth div
{
width: 150px !important;
}</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager><cc1:AutoCompleteExtender runat="server"
ID="AutoComplete1"
BehaviorID="autoComplete"
TargetControlID="TextBox1"
ServicePath="Service.svc"
ServiceMethod="GetEmpInfoWith_WCF"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="true"
CompletionSetCount="12"
CompletionListCssClass="AutoExtender"
CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass
="AutoExtenderHighlight"
CompletionListElementID="divwidth"/><div ID="divwidth"></div>
<center>
EmpName <asp:TextBox ID="TextBox1" Width="150px" runat="server"/>
</center><br />
</div>
</form>
</body>
</html>
Chandradev's Blog 