AutoCompleteExtender in ASP.Net calling from database using Webservice

Description:

In this article I will demonstrate how to create an AutoComplete extender for your web application which calling through WebService from your database:

Content:

In this article I will explain how to create an AutoComplete extender.

First create a web service in your ASP.Net project. In your WebService page write the code below.

public DataTable GetRecords(string strName)
{

string strConn = ConfigurationManager.ConnectionStrings
["XinVideoConnectionString"].ConnectionString;
SqlConnection con = new SqlConnection(strConn);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandType = System.Data.CommandType.Text;
cmd.Parameters.AddWithValue("@Title", strName);
cmd.CommandText =
"select dbo.tblVideo_Desc.Title from dbo.tblVideo_Desc where dbo.tblVideo_Desc.Title like '%'+@Title+'%'";
DataSet objDs = new DataSet();
SqlDataAdapter dAdapter = new SqlDataAdapter();
dAdapter.SelectCommand = cmd;
con.Open();
dAdapter.Fill(objDs);
con.Close();
return objDs.Tables[0];

}

Here I am creating the method named "GetRecords". In that method I write my database connection string and get the particular
title name according to my table column. For your requirements you can use your own query.

Now in the .aspx page write the .css (cascaded style sheet) file shown below to decorate your AutoComplete extender text box style. You can write the css code into a separate css file also; that's your choice.

<style type="text/css">
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .9em;
font-weight: normal;
border: solid 2px #006699;
line-height: 20px;
padding: 10px;
background-color: White;
margin-left:10px;
}
.AutoExtenderList
{
border-bottom: dotted 2px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
#divwidth
{
width: 150px !important;
}
#divwidth div
{
width: 150px !important;
}
</style>.

We all know that while introducing ajax tools we must add the script manager into the .aspx page.

So first attach the script manager in to your page if you have not yet.

Now here is the complete code for the AutoExtender implementation.

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID ="Textbox1" ServicePath ="AutoComplete.asmx" ServiceMethod ="GetCompletionList" MinimumPrefixLength ="1" CompletionInterval ="10" EnableCaching="true" CompletionSetCount ="12" CompletionListCssClass="AutoExtender"
CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" CompletionListElementID="divwidth"
>
</cc1:AutoCompleteExtender>

1. Here the target control id is the name of the textbox whom you want to give the AutoExtender functionality. For mine it is TextBox1.

2. Here the "ServicePath" property is that name of your WebService file in which you write the GetRecords name.
   For mine my WebService name is "AutoComplete.asmx" .

3. In the ServiceMethod Property you must give "GetCompletionList".

4. Now in the CompletionListItemCssClass, CompletionListHighlightedItemCssClass and CompletionListElementID properties we define all the css class atributes that we have mentioned in our .css file or class at the first.