Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Add Auto suggestion to your website using AJAX AutoCompleteExender control
Posted By Sarin on Feb 04, 2013     RSS Feeds     Latest Hinduism news
9560 Views

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 filterList;
        }

In the above code, on page load, I retrieve the list of news result from the xml file and store it in a list. GetCompletionList is the method that will be called when the user enters three or more characters on the textbox. This method has three parameters. Prefixtext will contain the user input and count will contain the value set in the CompletionSetCount property. In this method, I loop through the news items to retrieve the items that contain the user input string.
  
Check below screenshot to understand how it works when I run the code. Attached is the sample project Code.
 

Conclusion: In this article, we saw how to use autocompleteextender control to implement autosuggest feature on our website.
  


Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Related Articles
Simple Ajax client server Example
Ways of implementing AJAX
Populating RSS XML Feed or XML data on Datagrid
Add Auto suggestion to your website using AJAX AutoCompleteExender control
Find range of elements in HTML with jquery

Post Comment