Auto Complete Extender using Ajax

Introduction

Ajax AutoComplete Extender controls is one of the most popular control in Asp.net. Suppose you are at Google home page and you want to see few story books for kids, so you start typing something like "Kids story book", at the same time Google start suggesting the topics(Auto suggestion), this is the functionality where AutoComplete extender comes into picture in Asp.net.


How to Implement Autocomplete Extender
<asp:AutoCompleteExtender  ID="Story_AutoCompleteExtender"  runat="server" DelimiterCharacters="" Enabled="True" ServicePath="Story.asmx" ServiceMethod="GetStoryBooks" MinimumPrefixLength="2"  TargetControlID="txtSearchTextBox"> asp:AutoCompleteExtender>

In above code Story.Asmx is my webservice which pulls the data from any datasource. In our case it is XML file.
ServiceMethod: Is your web method
TargetControlID: is your control where you will type your search string

How to Bind search text box with Autocomplete Extender:  Select text box and click the smart tag, now choose the Autocomplete extender.

WebService Code:

[System.Web.Services.WebMethod]
 

public static string[] GetStoryBooks(String prefixText, int count)
{
  List<String> suggestions = new List<string>();
  DataSet dtSuggestedResult = new DataSet();
  dtSuggestedResult = GetStorySuggestionList(prefixText.Trim());
 

   if (dtSuggestedResult.Tables[0].Rows.Count > 0)
      {
        for ( 

               int i = 0; i; 

dtSuggestedResult.Tables[0].Rows.Count; 

i++

)
         {
            string suggestion = 

dtSuggestedResult.Tables[0].Rows[i]["BooksName"].ToString();
            suggestions.Add(suggestion);
         }
     }
   return suggestions.ToArray();
}