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:

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.


Related Downloads

ASP.NET webforms autocompletion demos


Leave a Comment


Thanks June 7, 2012 by Tushar Joshi

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

Re: Explain code in return statement June 7, 2012 by Christoff Truter

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.

Can you please explain the code in return statement ? June 7, 2012 by Tushar Joshi

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(); "


    Related Posts

    ASP.NET(C#) : Autocomplete TextBox - Part 1 (From Scratch)

    March 27, 2011


    Latest Posts

    Getting my hands dirty with TypeScript

    February 17, 2015

    Quick and dirty look at TypeScript

    January 29, 2015

    My personal life in review

    January 21, 2015

    Quick rundown of possible new C# 6.0 features (perhaps, maybe - I think)

    January 19, 2015

    Proof of Concept - JavaScript Mediator Framework

    January 13, 2015

    JavaScript Tip - Benchmarking

    January 7, 2015

    Google's new and improved reCAPTCHA - simple PHP implementation

    January 5, 2015

    NASA missions to follow in 2015

    January 3, 2015

    Online content censorship - South Africa

    January 2, 2015

    Enhance Customer Registration Process with Cutting-Edge Solutions from Card Scanning Solutions Inc.

    November 4, 2013


    Most Commented on Posts

    Moving items between listboxes in ASP.net/PHP example

    Move items between two listboxes in ASP.net(C#, VB.NET) and PHP
    June 12, 2008

    Simple WYSIWYG Editor

    Creating a WYSIWYG textbox for your website is actually quite simple.
    February 1, 2007

    C# YouTube : Google API

    Post on how to integrate with YouTube using the Google Data API
    March 12, 2011

    Populate a TreeView Control C#

    Populate a TreeView control in a windows application.
    August 27, 2009

    Cross Browser Issues: Firefox Word Wrapping

    Firefox word wrapping issues
    June 9, 2008


    Angular   ASP.NET   Astronomy   C#   C++   Coding Horrors   Comedy   Cross Browser   Design Patterns   Google API   IIS   Integration   JavaScript   Love and War   Microsoft Office   Personal   PHP   South Africa   SQL   Threading   TypeScript   Visual Basic   XML