Click here to Skip to main content
13,198,467 members (68,693 online)
Click here to Skip to main content
Add your own
alternative version


148 bookmarked
Posted 23 Jan 2007

AJAX AutoComplete/AutoSuggest TextBox

, 2 Oct 2007
Rate this:
Please Sign up or sign in to vote.
An article on AJAX AutoSuggest control
Sample Image - maximum width is 600 pixels


This is an AJAX AutoSuggest ASP.NET textbox I've created a while ago. It is built on top of the Anthem.NET library.


When building enterprise web applications, we often need to let the user select one item from a large list of records. For instance, on an order entry form, the user must be able to select the customer from a large list of customers. For performance reasons, it would be insane to just load a DropDownList with 50000 items. The other alternative would be to open another form where the user would be able to search and select the desired customer. I've used this approach before, but the users usually found it very annoying and were constantly demanding a better solution.


The AJAX boom made it an easy problem to solve. An AutoSuggest textbox, where the user would type a part of the desired customer name and the control would show the matches, would fit perfectly here. Yet, I couldn't find one that would completely fill my needs. I needed an AutoSuggest textbox with the following features:

  • Built-in validation
  • Template-based content
  • Ability to bind to all sorts of objects (collection, datatables, etc)
  • Ability to work like a DropDownList
  • Smooth integration with Anthem.NET
  • Ability to show a header
  • No need to call webservices

The Control

This custom control is based on the Anthem library. I decided to use Anthem because at that time I was already using it on my projects. The Atlas Project was not mature enough and Anthem seemed much easier and more powerful. The Anthem library now has an official AutoSuggest control, but I haven't checked it out yet. If you are not familiar with Anthem.NET yet, I encourage you to check it out. It's pretty simple and works great. The JavaScript OO model was based on another free AutoSuggest control that I found on this web site. I found it pretty nice, but it was missing some functionality I needed.

Setting Up

To use this AutoSuggest control, you will need to reference both the Anthem.dll and Anthem.AutoSuggest.dll in your project. The download contains these DLLs, the AutoSuggest source code and an example project source code.

Using the Code

The first thing you need to do is to add the control to your page. This can be done through drag and drop or by writing the tags directly into the ASPX source file. Since I didn't add any relevant design-time support, I think you'd better stick with the ASPX source code. In this example we are using the AutoSuggest control to display the names of various bands and the user must select his favorite one.

<Anthem:AutoSuggestBox runat="server" 

    ID="asbFavoriteBand" DataKeyField="ID" 

    TextBoxDisplayField="Name" AutoCallBack="true" 

    ItemNotFoundMessage="Item not found!" >
        <%# ((Band)Container.DataItem).Name %>

I think most of the property names are self-explanatory. I encourage you to go through the properties and play with them. For those unfamiliar with the Anthem.NET library, the AutoCallBack attribute tells that after the selected value has changed, the control will trigger a callback to the server. It's equivalent to the AutoPostBack property of the regular ASP.NET controls. Notice that you can use the ItemTemplate in the same manner in which you use it with the Repeater, DataList or DataGrid controls. The DataKeyField property tells the control which field it will use to set the SelectedValue property.

After adding the control to the page, you should set up the event handlers. The most important event you should handle is the TextChanged event. This is where you are going to fill the suggested list. Another important event is the SelectedValueChanged. This event is fired whenever you change the current value. To wire up these handlers, you can write the following code in the OnInit method:

protected override void OnInit(EventArgs e)
    this.asbFavoriteBand.TextChanged += 
        new Anthem.AutoSuggestBox.TextChangedEventHandler(

    this.asbFavoriteBand.SelectedValueChanged += 
        new Anthem.AutoSuggestBox.SelectedValueChangedHandler(

Here's the code to handle the TextChanged event:

void asbFavoriteBand_TextChanged(object source, 
        Anthem.AutoSuggestEventArgs e)
    //Creates a dataview from a datatable
    DataView dv = new DataView(_dtBands);

    //Filters the datatable based on the CurrentText property
    dv.RowFilter = string.Format("BandName LIKE '%{0}%'", e.CurrentText);

    //Sets the dataview as the control's datasource
    asbFavoriteBand.DataSource = dv;

In the snippet above, you can use any data source on the AutoSuggest control. Usually you would query the database for the result set. It's when you call the DataBind method that the suggested list appears on the screen.

Points of Interest

There are, definitely, some nice aspects of this control that demand a closer look at how .NET controls work, like using embedded web resources (images, JavaScript and CSS files), supporting template based content, triggering events and handling the JavaScript integration.

Object-Oriented JavaScript is also worth a look. It really makes things easier.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Cassio Mosqueira
Software Developer (Senior) Intelligent Coder
Canada Canada
I've been developing .NET enterprise applications since 2000.

I am originally from Rio de Janeiro and I am currently working at in Ontario.

I also have my own startup where we offer client intake forms.

You may also be interested in...

Comments and Discussions

GeneralCouldnt load control Pin
airbase24-Jun-08 3:48
memberairbase24-Jun-08 3:48 
QuestionLinking within the autocomplete Pin
ddoug2323-Jun-08 8:12
memberddoug2323-Jun-08 8:12 
AnswerRe: Linking within the autocomplete Pin
laoyingisme25-Jun-08 0:23
memberlaoyingisme25-Jun-08 0:23 
GeneralRe: Linking within the autocomplete Pin
ddoug2325-Jun-08 2:04
memberddoug2325-Jun-08 2:04 
QuestionI find a small bug [modified] Pin
laoyingisme11-Jun-08 17:36
memberlaoyingisme11-Jun-08 17:36 
GeneralSetting another control based on this control problem Pin
Stonkers4-Jun-08 12:22
memberStonkers4-Jun-08 12:22 
GeneralRe: Setting another control based on this control problem Pin
Stonkers5-Jun-08 5:31
memberStonkers5-Jun-08 5:31 
QuestionUsing Database table instead of Static datatable Pin
GiveDcode9-Apr-08 1:48
memberGiveDcode9-Apr-08 1:48 
AnswerRe: Using Database table instead of Static datatable Pin
laoyingisme11-Jun-08 17:15
memberlaoyingisme11-Jun-08 17:15 
QuestionBug Autosuggest project Pin
sameer_wanwey25-Mar-08 20:26
membersameer_wanwey25-Mar-08 20:26 
GeneralCalling a client side function upon SelectedValueChange Pin
Member 189180224-Mar-08 11:44
memberMember 189180224-Mar-08 11:44 
GeneralAutosuggest selecting with arrow and enter key fix Pin
tmrhymer12-Mar-08 7:26
membertmrhymer12-Mar-08 7:26 
GeneralProblem with space Pin
Prithwish Biswas6-Mar-08 4:50
memberPrithwish Biswas6-Mar-08 4:50 
Generaltwo autosuggest in one page Pin
pn_renju22-Feb-08 1:21
memberpn_renju22-Feb-08 1:21 
Can I use more than one autosuggest in one page? Please help with code sample. And also when I use an autosuggest control, the area behind the drop down list which came can not be accessed with mouse click even after that layer became hidden.I put the control inside a layer in order to overcome the blank area left out when I use a table.It was not recapturing or going back.
AnswerRe: two autosuggest in one page Pin
saro_ja25-Feb-08 7:40
membersaro_ja25-Feb-08 7:40 
Question"'JSAutoSuggestBox' is undefined". Java script error Pin
saro_ja19-Feb-08 7:54
membersaro_ja19-Feb-08 7:54 
GeneralOnFocus of Autosuggest Pin
tmrhymer3-Jan-08 8:32
membertmrhymer3-Jan-08 8:32 
QuestionAutosuggest Problem Pin
sameer_wanwey10-Dec-07 19:03
membersameer_wanwey10-Dec-07 19:03 
AnswerRe: Autosuggest Problem Pin
Priyatam K14-Dec-07 1:30
memberPriyatam K14-Dec-07 1:30 
QuestionRe: Autosuggest Problem Pin
sameer_wanwey24-Dec-07 20:52
membersameer_wanwey24-Dec-07 20:52 
AnswerRe: Autosuggest Problem Pin
Priyatam K24-Jun-08 4:07
memberPriyatam K24-Jun-08 4:07 
GeneralAutosuggest results causing links to not work Pin
tmrhymer7-Dec-07 6:21
membertmrhymer7-Dec-07 6:21 
GeneralResolved Pin
tmrhymer19-Dec-07 5:21
membertmrhymer19-Dec-07 5:21 
QuestionClear Text Pin
Ron Lock7-Dec-07 5:33
memberRon Lock7-Dec-07 5:33 
QuestionPre/Post callback Functions Not Firing - Show Spinny Pin
cbone21-Nov-07 8:39
membercbone21-Nov-07 8:39 
Questionhow can i disable textboxes of datalist item templete by javascript Pin
Harun.Net14-Nov-07 19:37
memberHarun.Net14-Nov-07 19:37 
GeneralImplementing Scrolling - ON AutoSuggest Pin
imaginedesgin24-Oct-07 9:30
memberimaginedesgin24-Oct-07 9:30 
GeneralRe: Implementing Scrolling - ON AutoSuggest Pin
Cassio Alves24-Oct-07 15:48
memberCassio Alves24-Oct-07 15:48 
GeneralNew ie 6 issue Pin
tmrhymer19-Oct-07 12:21
membertmrhymer19-Oct-07 12:21 
GeneralRe: New ie 6 issue Pin
imaginedesgin24-Oct-07 9:41
memberimaginedesgin24-Oct-07 9:41 
GeneralRe: New ie 6 issue Pin
tmrhymer29-Oct-07 3:52
membertmrhymer29-Oct-07 3:52 
GeneralPerfect Pin
ftoomi8-Oct-07 15:49
memberftoomi8-Oct-07 15:49 
QuestionError evaluating client-side script! Pin
Samnang Chhun4-Oct-07 23:44
memberSamnang Chhun4-Oct-07 23:44 
GeneralPutting Javascript into JS file Pin
bgates19703-Oct-07 8:51
memberbgates19703-Oct-07 8:51 
GeneralRe: Putting Javascript into JS file Pin
Cassio Alves3-Oct-07 14:50
memberCassio Alves3-Oct-07 14:50 
GeneralRe: Putting Javascript into JS file Pin
bgates19705-Oct-07 7:22
memberbgates19705-Oct-07 7:22 
QuestionIssue with Master page? Pin
Samnang Chhun30-Sep-07 22:11
memberSamnang Chhun30-Sep-07 22:11 
AnswerRe: Issue with Master page? Pin
Cassio Alves1-Oct-07 16:39
memberCassio Alves1-Oct-07 16:39 
QuestionCan't bind datasource to Repeater that has AutoComplete control outside Page_Load? Pin
Samnang Chhun30-Sep-07 15:59
memberSamnang Chhun30-Sep-07 15:59 
QuestionCan't enable or disable TextChanged event from AutoComplete? [modified] Pin
Samnang Chhun27-Sep-07 20:51
memberSamnang Chhun27-Sep-07 20:51 
AnswerRe: Can't enable or disable TextChanged event from AutoComplete? Pin
Samnang Chhun30-Sep-07 15:50
memberSamnang Chhun30-Sep-07 15:50 
QuestionCan't use AJax AutoComplete in DataList? Pin
Samnang Chhun26-Sep-07 22:22
memberSamnang Chhun26-Sep-07 22:22 
AnswerRe: Can't use AJax AutoComplete in DataList? Pin
Cassio Alves27-Sep-07 4:28
memberCassio Alves27-Sep-07 4:28 
GeneralRe: Can't use AJax AutoComplete in DataList? Pin
Samnang Chhun27-Sep-07 15:52
memberSamnang Chhun27-Sep-07 15:52 
GeneralRe: Can't use AJax AutoComplete in DataList? Pin
Cassio Alves27-Sep-07 18:43
memberCassio Alves27-Sep-07 18:43 
QuestionRe: Can't use AJax AutoComplete in DataList? Pin
Nihar Ranjan Jena12-Nov-07 19:37
memberNihar Ranjan Jena12-Nov-07 19:37 
QuestionCan't get SelectedValue when user type correctly? Pin
Samnang Chhun26-Sep-07 18:31
memberSamnang Chhun26-Sep-07 18:31 
AnswerRe: Can't get SelectedValue when user type correctly? Pin
Cassio Alves26-Sep-07 18:40
memberCassio Alves26-Sep-07 18:40 
QuestionAdd event at runtime? Pin
Samnang Chhun26-Sep-07 17:10
memberSamnang Chhun26-Sep-07 17:10 
AnswerRe: Add event at runtime? Pin
Cassio Alves26-Sep-07 17:55
memberCassio Alves26-Sep-07 17:55 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171020.1 | Last Updated 2 Oct 2007
Article Copyright 2007 by Cassio Mosqueira
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid