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

The source code for the following post can be downloaded here.

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 thats 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:

Extender control designer

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

Select Extender Control

(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 Trüter", 
    "Eugene Stander",
    "Roland Cooper",
    "Alexander Mehlhorn",
    "Derek Campher",
    "Julie Trüter",
    "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 Trüter", 
        "Eugene Stander",
        "Roland Cooper",
        "Alexander Mehlhorn",
        "Derek Campher",
        "Julie Trüter",
        "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.

Posted by - Christoff Truter
Date - 2011-04-10 19:39:39

Comments

Thanks

Hi, Christoff Now I get it! Thanks for your reply ! Keep posting :)

Posted by - Tushar Joshi
Date - 2012-06-07 20:49:48

Re: Explain code in return statement

Hi Tushar Thats pretty much just a LinQ query I am using to traverse the string array I am using in the snippet for demonstration purposes. The SQL equivalent of what I am trying to achieve would look something like this: SELECT TOP(@count) sometext FROM SometTable WHERE sometext LIKE '%' + @prefixText + '%' Developers would obviously rather want to return autocompletion data from a Stored Procedure or even a Linq-to-Sql statement - or whatever ORM they prefer.

Posted by - Christoff Truter
Date - 2012-06-07 20:20:50

Can you please explain the code in return statement ?

Thanks for posting because "simpler is better" ! But,I wont get the following line of code.I need your help " return (from p in data where p.IndexOf(prefixText, StringComparison.OrdinalIgnoreCase) >= 0 select p).Take<String>(count).ToArray(); "

Posted by - Tushar Joshi
Date - 2012-06-07 16:46:11