ASP.NET(C#) : Autocomplete TextBox - Part 2 (AjaxControlToolkit)

April 10, 2011 by Christoff Truter C#   ASP.NET  

In the previous part of this post we had a look at how to create an autocomplete textbox from scratch using the scriptmanager, asp.net, c# and JavaScript.

Now in this post we're going to have a look at how to use a control created by Microsoft - which should represent a more mature solution than the one we looked at in the first part of this post

I am of course talking about the open source autocomplete extender control that's part of the Ajax Control Toolkit.

First of all you'll need to download the latest AjaxControlToolkit assembly.

Next you will need to add the assembly to your toolbox, which will add the extender designer item (if you don't have other extenders already), like seen in the following image to the Visual Studio IDE:



When you click on "Add Extender", the following popup will appear that displays a list of available extenders:


(obviously you'll need to select the autocomplete extender ;))

Like in part 1 of this post, we've got two options that we can use as datasources, PageMethods or Webservices.

PageMethod:

<asp:AutoCompleteExtender ID="txtValue_AutoCompleteExtender" runat="server" DelimiterCharacters=""
    Enabled="True" TargetControlID="txtValue" ServiceMethod="Get" MinimumPrefixLength="1"
    CompletionSetCount="5" CompletionInterval="500">
</asp:AutoCompleteExtender>

public partial class _Default : System.Web.UI.Page
{

[WebMethod]
public static string[] Get(String prefixText, Int32 count)
{
    // Dummy data - don't do this
    string[] data = new string[] { 
    "Christoff Truter", 
    "Gerhardt Stander",
    "Roland Cooper",
    "Alexander Mehlhorn",
    "Derek Campher",
    "Jurgens Truter",
    "Hanno Coetzee",
    "Wayne Kleynhans",
    "Pieter Du Plooy",
    "Pam Nizar" };

    return (from p in data
            where p.IndexOf(prefixText, StringComparison.OrdinalIgnoreCase) >= 0
            select p).Take<String>(count).ToArray();
}

Quick things to remember about PageMethods:

• need to be public and static. (since its being called client-side it wont have server-side access to the current served page, therefore it would have been pointless to make it an instance method - among other reasons)
• lives on the page that calls it.

Webservice:

<asp:AutoCompleteExtender ID="txtValue_AutoCompleteExtender" runat="server" DelimiterCharacters=""
    Enabled="True" TargetControlID="txtValue" ServiceMethod="Get" ServicePath="~/Services/myService.asmx" MinimumPrefixLength="1"
    CompletionSetCount="5" CompletionInterval="500">
</asp:AutoCompleteExtender>

[System.Web.Script.Services.ScriptService]
public class myService : System.Web.Services.WebService
{
    [WebMethod]
    public string[] Get(String prefixText, Int32 count)
    {
        // Dummy data - don't do this
        string[] data = new string[] { 
        "Christoff Truter", 
        "Gerhardt Stander",
        "Roland Cooper",
        "Alexander Mehlhorn",
        "Derek Campher",
        "Jurgens Truter",
        "Hanno Coetzee",
        "Wayne Kleynhans",
        "Pieter Du Plooy",
        "Pam Nizar" };

        return (from p in data
                where p.IndexOf(prefixText, StringComparison.OrdinalIgnoreCase) >= 0
                select p).Take<String>(count).ToArray();
    }
}

Here is a quick description of some of the most important attributes used.

• TargetControlID : The texbox that must be autocompleted.
• ServiceMethod : The PageMethod or Service method (if ServicePath defined)
• ServicePath : The path to the service thats used for consumption.
• MinimumPrefixLength : The minimum amount of letters that must be typed within the textbox before a query is attempted to the server.
• CompletionSetCount : The number of results to return.
• CompletionInterval : The number (in milliseconds) to wait until a query to the server is attempted.

You can read more about other attributes of this extender control here.