How to create AutoComplete in asp.net using Ajax?


Hi

These are the few steps to do this task

Step1:Create one web service and the method like this in “WebService.cs” file

Note: Donot forget to uncomment on this line “[System.Web.Script.Services.ScriptService]”

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Web.Configuration;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = “http://tempuri.org/&#8221;)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

[WebMethod]
public string[] GetCountryInfo(string prefixText)
{
SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings[“Test”].ConnectionString);

string sql = “Select CountryName from tblcountry Where CountryName like @prefixText”;
SqlDataAdapter da = new SqlDataAdapter(sql, con);
da.SelectCommand.Parameters.Add(“@prefixText”, 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[“CountryName”].ToString(), i);
i++;
}
return items;
}
else
{

string[] items = new string[1];

items.SetValue(“No Name Match”, 0);

return items;

}

}

}

Step 2:Take AutoCompleteExtender  Ajax control and
Call the method in “Default.aspx” file like  this

<cc1:AutoCompleteExtender ID=”AutoCompleteExtender2″ runat=”server” MinimumPrefixLength=”1″ ServiceMethod=”GetCountryInfo” ServicePath=”WebService.asmx” TargetControlID=”TextBox1″ CompletionListCssClass=”autocomplete_completionListElement”
CompletionListItemCssClass=”autocomplete_listItem”
CompletionListHighlightedItemCssClass=”autocomplete_highlightedListItem”/>

Complete Default.aspx page is like

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

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

<cc1:AutoCompleteExtender ID=”AutoCompleteExtender2″ runat=”server” MinimumPrefixLength=”1″ ServiceMethod=”GetCountryInfo” ServicePath=”WebService.asmx” TargetControlID=”TextBox1″ CompletionListCssClass=”autocomplete_completionListElement”
CompletionListItemCssClass=”autocomplete_listItem”
CompletionListHighlightedItemCssClass=”autocomplete_highlightedListItem”/>

<asp:TextBox ID=”TextBox1″ runat=”server” Width=”258px”></asp:TextBox>
<div>
</div>
</form>
</body>
</html>

Step3: Compile the file. You will get output like this

Advertisement

4 thoughts on “How to create AutoComplete in asp.net using Ajax?

  1. xizwyck June 8, 2012 / 2:06 pm

    I know this is 2 years old… yet my web server does not open the connection to the database. If I return a hard coded string, works fine. Any suggestions?

    • Chandra Dev June 17, 2012 / 11:18 am

      Hi,
      I didnot understand your problem, could you write more about your problem ?

      • xizwyck June 17, 2012 / 11:30 am

        I found the error but I can’t remember the solution… thanks anyways.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.