How To Use Ajax AutoCompleteExtender in Asp.Net

Ajax a powerfull script on the web,It provides lot's more functionality to improve your application Perfomence and look and fell..

In this article i am going to show how to work with AutoCompleteExtender (Control in AjaxControlToolKIt).

AutoCompleteExtender is an ASP.NET AJAX Control that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.

Can we get the Auto Suggestion from server in two ways
1.From Webservice
2.From Static Method





Method 1:
Create a webmethod like as follows

[WebMethod]

    public string[] GetCities(string prefixText)

    {

        SqlConnection  con = new SqlConnection("server=localhost;Database=raji;User ID=sa;Password=abc;");

        con.Open();

        string strQuery = "select city from tbl_cities where cit like '" + prefixText + "%'";

        DataSet ds = new DataSet();

        SqlDataAdapter da = new SqlDataAdapter(strQuery,con);

        da.Fill(ds);

        con.Close();

        List<string> cityList = new List<string>();

        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

        {

            cityList.Add(ds.Tables[0].Rows[i][0].ToString());

        }

        con.Close();

        return cityList.ToArray();

    }

Note: Don't change the string parameter name 'prefixText'

»Run the webService and test it …

Now create a website  » Add TextBox » Add AutoCompleteExtender ass follows..

 <asp:TextBox ID="txtCity" runat="server">asp:TextBox>    

    <ac:AutoCompleteExtender ID="AutoCompleteExtender1"    EnableCaching="true"

       BehaviorID="AutoCompleteCities" TargetControlID="txtCity"

       ServiceMethod="GetCities" ServicePath="Service.asmx" MinimumPrefixLength="1"      CompletionSetCount="10"

       runat="server" FirstRowSelected="true" >

 ac:AutoCompleteExtender>

» Add Web Reference to the application

Note: ServicePath Give your WebService File Name and ServiceMethod is Nothing but your Method name, that returns the fetched results.

Method 2:By using Static Method

Add TextBox » Add AutoCompleteExtender ass follows..

<asp:TextBox ID="txtCity" runat="server">asp:TextBox>

         <ac:AutoCompleteExtender ID="AutoCompleteExtender1"          EnableCaching="true"

       BehaviorID="AutoCompleteCities" TargetControlID="txtCity"

       ServiceMethod="GetCities" MinimumPrefixLength="1"  

       CompletionSetCount="10"

       runat="server" FirstRowSelected="true" >

       ac:AutoCompleteExtender>

» For this we need to set EnablePageMethods="true"  in ScriptManger

» In .cs file create a method as follows...

    [System.Web.Services.WebMethod]

    [System.Web.Script.Services.ScriptMethod]

    public static string[] GetCities(string prefixText)

    {

        SqlConnection con = new SqlConnection("server=localhost;Database=raji;User ID=sa;Password=123;");

        con.Open();

        string strQuery = "select city from city where city like '" + prefixText + "%'";

        DataSet ds = new DataSet();

        SqlDataAdapter da = new SqlDataAdapter(strQuery,con);

        da.Fill(ds);

        con.Close();

        List<string> cityList = new List<string>();

        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

        {

            cityList.Add(ds.Tables[0].Rows[i][0].ToString());

        }

        return cityList.ToArray();

    }

List Of Properties For AutocompleteExtender:
• TargetControlID - The TextBox control where the user types content to be automatically completed

• ServiceMethod - The web service method to be called. The signature of this method must match the following:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count) { ... }

Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

• ServicePath - The path to the web service that the extender will pull the word\sentence completions from. If this is not provided, the service method should be a page method.

• MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from the web service.

• CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.

• EnableCaching - Whether client side caching is enabled.

• CompletionSetCount - Number of suggestions to be retrieved from the web service.

• CompletionListCssClass - Css Class that will be used to style the completion list flyout.


• CompletionListItemCssClass - Css Class that will be used to style an item in the AutoComplete list flyout.

• CompletionListHighlightedItemCssClass - Css Class that will be used to style a highlighted item in the AutoComplete list flyout.

• DelimiterCharacters - Specifies one or more character(s) used to separate words. The text in the AutoComplete textbox is tokenized using these characters and the webservice completes the last token.

• FirstRowSelected - Determines if the first option in the AutoComplete list will be selected by default.

Source:asp.net/ajax