Click here to Skip to main content
12,501,010 members (49,620 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked

AutoCompleteExtender with data from ASPX code behind

, 9 Jan 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
The auto complete functionality is a useful aid where suggestions are displayed when you type into a textbox. You would have come across this in many sites.

The auto complete functionality is a useful aid where suggestions are displayed when you type into a textbox. You would have come across this in many sites. Looking at how to implement this in an ASP.Net application using the AJAX control toolkit, it was not a complex task, as the great video tutorial here demonstrates. But the video (and many other articles on the web) showed how to use the auto complete extender hooked up to a ASMX file. Almost all the articles described how AJAX retrieves the auto suggestion text via a web service and displays them when the user types into the text box. But my need was to get the suggested text from the code behind of the ASPX file where the textbox was displayed. I needed the AJAX control to communicate with a method in the ASPX code behind, instead of a service. Documented in the following sections is how I got it working.

In case you don’t have the AJAX control toolkit downloaded and integrated with Visual studio, the video here shows how to obtain the toolkit, and set it up in the development environment. I used Visual Web developer 2010 express for the example given here. Opening up the IDE, create an ASP.Net web project and reference the AJAX control toolkit DLL. You can also create a new tab in the toolbox and add the controls to it by selecting the DLL (the steps to do this are in the same video link). Drag a textbox to the default.aspx page, this will be the textbox where the user will type in and get the autocomplete suggestions.

Switching to source view in default.aspx,drag a ToolkitScriptManager from the AJAX control toolkit tab in the toolbox into the source window:

You need a script manager when using the AJAX control tools. The script manager takes care of generating the code to communicate with the back end using AJAX  without doing a post back of the page. ASP.Net AJAX extensions already provide a script manager, but the ToolkitScriptManager inherits from this previous componenet, and is better in performance due to script combining.

Next, drag the AutoCompleteExtender control onto the source window. This will be the AJAX component that specifies which control in the ASPX page gets the auto complete functionality and how:

Some properties in the AutoCompleteExtender have to specified in order for the auto complete functionality to work, and these are shown in the below screenshot:

TargetControlID is the ID of the textbox to which the AutoCompleteExtender is connected. ServicePath and ServiceMethod are the web service path and web method respectively. But as we are retrieving auto complete suggestions from our default.aspx.cs code behind, the ServicePath is left empty, and the ServiceMethod ‘GetNames’ is the name of the static method in the code behind that will return the array of strings triggered by the AJAX request.

The code behind file, default.aspx.cs will contain the method that will return the array of strings to the AJAX control in the ASPX page. The method has to be declared static, and should be decorated with the ‘WebMethod’ and ‘ScriptMethod’ attributes. WebMethod is used to specify that the method is part of a service, and ScriptMethod is used to identify a method that AJAX can invoke. The complete code in the default.aspx.cs is given below:

Some specifics to note:

  • The ServiceMethod can have any name, but it should be declared static, and it should be decorated with the WebMethod and ScriptMethod attributes.
  • The parameters of the method should be ‘prefixText’ and ‘count’, of type string and int, respectively. They are case sensitive and cannot be changed to any other variable name. prefixText is the text we enter into the textbox, sent over by AJAX, and count is the number of characters typed in. They can be used in many ways, specially when retrieving string values from a database.
  • The method should return an array of strings. There are workarounds to return collections and key-value pairs, but they are out of the scope of this post.

When you debug the web application, you should see the auto complete functionality that you have wired up to your textbox, when you type in some text:

I had to type a minimum of three characters before the auto complete kicked in, but this minimum number of characters can be set in the AutoCompleteExtender control, using the ‘MinimumPrefixLength’ property. This basically covers the essentials needed for passing data to the auto complete AJAX control using a method from the ASPX code behind file, instead of  a Web service or WCF service.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mark Vinod Sinnathamby
Technical Lead Exilesoft
Sri Lanka Sri Lanka
I am a software craftsman who is passionate about software architecture/ecosystems, and an ardent advocate of shipping high quality software that enhances user experience and provides business value. My technical experience extensively covers the Microsoft .NET stack, C/C++ development, and web application design/development.

In my current tenure, I work as a technical lead at Exilesoft, a hardcore software engineering firm that provides solutions, services, and consultancy, to a global client base in various industrial and technology domains. Prior to working at Exilesoft, I have worked as a developer for a software product engineering company, a senior engineer for a startup in the design and manufacturing space, and also as an ERP/technical consultant for a Fortune 500 company.

My current areas of research and interest revolve around enterprise architecture/EAI, machine learning, NoSQL databases, big data, and predictive analytics. I blog at on various topics related to software engineering, artificial intelligence, data/computer science, and mathematics. Feel free to email or message me anytime and strike up a conversation.

You may also be interested in...

Comments and Discussions

QuestionMulti AutoCompleteExtender Pin
hanx.xcb18-Sep-12 6:41
memberhanx.xcb18-Sep-12 6:41 
AnswerRe: Multi AutoCompleteExtender Pin
markFaction18-Sep-12 7:10
membermarkFaction18-Sep-12 7:10 
GeneralRe: Multi AutoCompleteExtender Pin
hanx.xcb18-Sep-12 7:25
memberhanx.xcb18-Sep-12 7:25 
GeneralMy vote of 4 Pin
Tapan dubey7-Jul-11 23:52
memberTapan dubey7-Jul-11 23:52 
GeneralGood one!! Pin
meeram3959-Jan-11 20:43
membermeeram3959-Jan-11 20:43 
GeneralRe: Good one!! Pin
markFaction10-Jan-11 5:36
membermarkFaction10-Jan-11 5:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160919.1 | Last Updated 9 Jan 2011
Article Copyright 2011 by Mark Vinod Sinnathamby
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid