Add Auto suggestion to your website using AJAX AutoCompleteExender control
Auto complete is the most common Ajax control used across thousands of website and social networking sites. If you unaware of what this control is then just think about the list of items that pops out when you enters few characters on Google search page. This control is usually used for implementing search functionality of your website. This control will display a list of phrases that matches with the value entered in the textbox. This control accepts the input from the user and based on the input, items are filtered out from the list to show the filtered items back to the user. The number of items that is shown at a time is determined by the CompletionSetCount property.
Working of Ajax Control:
Below is the short explanation on how the Ajax auto complete control works:
1) Autocomplete control is attached to the textbox control
2) Using web service or Ajax, we get the list of search items from the database or XMLfile.
3) Set the minimumprefixlength and completioncount property.
4) On entering the number of characters specified in the MinimumPrefixLength property, service method is called to get the list of items that matches with the input string.
5) Enable calling to reduce the call to the service. If same characters are entered several times, list of items are retrieved for only the first call. For the next call, items are retrieved from the cache.
6) Add Css styles to style your control and alternate items of your results.
Properties and methods:
Below are some of the important methods and properties of Ajax auto complete control
TargetControlID - Id of the textbox control where the user will input this characters.
ServiceMethod - Method that will be called to get the list of results when the user input enters few characters on the screen
ServicePath - Web service or the name of the web page where your method lies.
CompletionSetCount - Determine the number of items to be returned in the result set.
MinimumPrefixLength -Minimum number of characters to trigger the ServiceMethod .
CompletionListCssClass- Css to style whole result block
CompletionListItemCssClass- Css to style each item in the result
CompletionListHighlightedItemCssClass- Css style for current highlighted item.
Demo:
In this demo, I have a simple textbox on which I have attached my auto complete control. To use this control, either drag and drop Autocomplete extender control from Ajax toolkit or add a reference to Ajax toolkit and add the following markup in your html code.
<asp:TextBox ID="txtTitle" runat="server" Width="500"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="txtTitle_AutoCompleteExtender" runat="server" ServiceMethod="GetCompletionList" TargetControlID="txtTitle"
UseContextKey="True" CompletionListCssClass="AutoExtenderControl" CompletionListItemCssClass="ListItems" MinimumPrefixLength="3" CompletionSetCount="5"
CompletionListHighlightedItemCssClass="HighlightItem" ServicePath="~/AutoComplete.aspx"
/>
In the above code, my target control is textbox, MinimumPrefixLength is 3 and CompletionSetCount is 5. Instead of creating a separate service, I have declared the service method in the code behind of my aspx page. Below is the code behind.
static string Path="";
static List<string> list = null;
protected void Page_Load(object sender, EventArgs e)
{
Path = Server.MapPath(AppRelativeVirtualPath);
Path = Path.Remove(Path.LastIndexOf("\\")+1);
XDocument doc = XDocument.Parse(File.ReadAllText(Path + "News.xml"));
list = (from n in doc.Descendants("News")
select (string)n.Attribute("Title")).ToList();
}
[System.Web.Services.WebMethodAttribute(),System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey)
{
XDocument doc = XDocument.Parse(File.ReadAllText(Path + "News.xml"));
string[] filterList = (from fi in list where fi.ToLower().Contains(prefixText.ToLower()) select fi).ToArray();
return