Building a Type-Ahead Dropdown Control
page 1 of 3
Published: 21 Feb 2006
Unedited - Community Contributed
Abstract
The ASP.NET DropDownList control does not offer type-ahead functionality. Often users have to scan through hundreds of items before making a selection. This article shows how to easily implement type-ahead functionality in a dropdown that will be a hit with your users.
by Michael Libby
Feedback
Average Rating: 
Views (Total / Last 10 Days): 70254/ 101

Introduction

Microsoft's DropDownList control for ASP.NET does not offer type-ahead functionality.  Often users have to scroll through hundreds of items before making a selection.  This article shows how to easily implement dropdown type-ahead functionality that uses keystrokes to find an exact selection, making scrolling optional.  The article first shows how to do this in a simple ASP.NET web page, and then with the use of a web server control that can be shared across multiple projects.

Figure 1- Web Page with Type-Ahead Dropdown Controls


View Entire Article

User Comments

Title: web developer   
Name: Howard
Date: 2012-11-13 11:37:57 AM
Comment:
Only getting the 1st character
Title: thank you   
Name: rashmi
Date: 2011-06-30 7:52:16 AM
Comment:
thank you very much
Title: Type Ahead all characters included   
Name: Jesus Duperon
Date: 2010-04-12 9:42:25 PM
Comment:
Great job! I found out that if you use OnKeyPress intead of onKeyDown you can have the code look for the actual text entered andnot the KeyCode.

Soi nstead of:
ddlTest.Attributes.Add("onKeyDown", "TADD_OnKeyDown(this);");

Usethis:
ddlTest.Attributes.Add("onKeyPress", "TADD_OnKeyDown(this);");

And your Type ahead will work with any character.
Title: IE 6.0   
Name: Santhosh
Date: 2009-12-10 7:00:56 AM
Comment:
Hi, This code works great in IE7 & Mozilla, When i am running it in IE6 it is not working, Is there anything we need to change in the .js fle for IE6
Title: Great!   
Name: Gerardo Angeles
Date: 2008-12-30 2:46:19 PM
Comment:
Thank you very much, save my day!
Title: Problem working with vb.net   
Name: Sriram
Date: 2008-10-23 1:29:10 AM
Comment:
Hi this code works great with C# but not with vb.net..
i have to type fastly inorder to get to a ddl list item.
If i do it slowly it doesnt work as it does in C#
As I am a novice in vb.net programming...could anybody help me in solving this problem
Title: Doesnt work fine with VB.net   
Name: Oneness
Date: 2008-10-23 12:52:53 AM
Comment:
This code works fine with C# but is not that fine with vb.net..
Title: Great Work!!!!   
Name: Sriram
Date: 2008-10-22 9:54:01 AM
Comment:
This is a highly useful code.. Congrats for the work
Title: Optimize this for VS 2008   
Name: Richard
Date: 2008-03-26 4:12:58 PM
Comment:
How do I optmize this for VS 2008?
Title: Working on server but not PCs   
Name: evaleah
Date: 2007-07-19 4:13:07 PM
Comment:
I have this working nicely when I am on a server where the dll is installed. When a user accesses the page the control is not working.

Any ideas?
Title: PostBack   
Name: Kdkcchoco
Date: 2007-02-14 12:00:52 PM
Comment:
This control is awesome but can someone tell me how can we add functionality of postback to it.I have drop down who has to fill up other fields on postback.
Thanks a lot
Title: With Visual Studio 2003   
Name: Prithvi
Date: 2007-02-01 4:05:36 AM
Comment:
Hi
Good Work!

Can anyone please help in developing the same using Visual Studio .NET 2003?
Thanks!
Title: Did not work if you have a "." in your list of item in dropdownlist   
Name: vinni
Date: 2006-11-15 11:12:39 AM
Comment:
It works great if you do not have a "." in your list items if you do as and when you type . it will clear the value in dropdownlist.Does anyone know how to do it??
Title: Code only pt 4   
Name: Austin Lawlor
Date: 2006-10-23 4:03:38 PM
Comment:
sbJS.AppendLine(@"function TADD_SelectItem(typeAheadData){");
sbJS.AppendLine(@" var ddl = document.getElementById(typeAheadData.focusDDLId);");
sbJS.AppendLine(@" ddl.selectedIndex = -1;");
sbJS.AppendLine(@" if (typeAheadData.keyStrokes.length > 0){");
sbJS.AppendLine(@" for (i = 0; i < ddl.options.length; i++){");
sbJS.AppendLine(@" if ((ddl.options[i].text.length >= typeAheadData.keyStrokes.length)");
sbJS.AppendLine(@" && (ddl.options[i].text.substr(0,");
sbJS.AppendLine(@" typeAheadData.keyStrokes.length).toLowerCase() == typeAheadData.keyStrokes)){");
sbJS.AppendLine(@" ddl.selectedIndex = i;");
sbJS.AppendLine(@" return true;");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" return false;");
sbJS.AppendLine(@"}");
return sbJS.ToString();
Title: Code only pt 3   
Name: Austin Lawlor
Date: 2006-10-23 4:02:42 PM
Comment:
-96).toString();");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" else{");
sbJS.AppendLine(@" c=String.fromCharCode(event.keyCode).toLowerCase();");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" if (c != null){");
sbJS.AppendLine(@" typeAheadData.keyStrokes += c;");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" event.cancelBubble = true;");
sbJS.AppendLine(@" event.returnValue = false;");
sbJS.AppendLine(@" break;");
sbJS.AppendLine(@" } // END Switch");
sbJS.AppendLine(@" if (TADD_SelectItem(typeAheadData) == false){");
sbJS.AppendLine(@" typeAheadData.keyStrokes = '';");
sbJS.AppendLine(@" window.status='Not found'; ");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" else{");
sbJS.AppendLine(@" tb.fireEvent('onchange');");
sbJS.AppendLine(@" window.status='KeyStrokes: ' + typeAheadData.keyStrokes;");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@"}");
sbJS.AppendLine(@"");
Title: Code only pt 2   
Name: Austin Lawlor
Date: 2006-10-23 4:00:34 PM
Comment:
sbJS.AppendLine(@" case 27: // Esc");
sbJS.AppendLine(@" typeAheadData.ClearTyping();");
sbJS.AppendLine(@" return;");
sbJS.AppendLine(@" case 20: // Caps Lock key");
sbJS.AppendLine(@" case 33: // Pg Up");
sbJS.AppendLine(@" case 34: // Pg Down");
sbJS.AppendLine(@" case 35: // End key");
sbJS.AppendLine(@" case 36: // Home key");
sbJS.AppendLine(@" case 37: // Left arrow");
sbJS.AppendLine(@" case 38: // Up arrow");
sbJS.AppendLine(@" case 39: // Right arrow");
sbJS.AppendLine(@" case 40: // Down arrow");
sbJS.AppendLine(@" case 46: // Delete");
sbJS.AppendLine(@" case 91: // Windows key");
sbJS.AppendLine(@" case 93: // Context menu key (equivelent to right-click)");
sbJS.AppendLine(@" typeAheadData.keyStrokes = '';");
sbJS.AppendLine(@" return; ");
sbJS.AppendLine(@" case 9: // Tab");
sbJS.AppendLine(@" case 13: // Enter");
sbJS.AppendLine(@" typeAheadData.ClearTyping();");
sbJS.AppendLine(@" tb.fireEvent('onchange');");
sbJS.AppendLine(@" return; ");
sbJS.AppendLine(@" case 8: // Backspace");
sbJS.AppendLine(@" if (typeAheadData.keyStrokes.length > 0){");
sbJS.AppendLine(@" typeAheadData.keyStrokes = typeAheadData.keyStrokes.substr(0,typeAheadData.keyStrokes.length-1);");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" event.cancelBubble = true;");
sbJS.AppendLine(@" event.returnValue = false;");
sbJS.AppendLine(@" break;");
sbJS.AppendLine(@" default:");
sbJS.AppendLine(@" var c = '';");
sbJS.AppendLine(@" if ((event.keyCode>=96)&&(event.keyCode<=105)){ //Numbers 0-9");
sbJS.AppendLine(@" c=(event.keyCode
Title: Try this again - code only   
Name: Austin Lawlor
Date: 2006-10-23 3:57:35 PM
Comment:
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
Type type = GetType();
if (!Page.ClientScript.IsClientScriptBlockRegistered(type, "TADropDownScript"))
{
Page.ClientScript.RegisterClientScriptBlock(type, "TADropDownScript", GetTaDdlJS(), true);
}

Attributes.Add("onKeyDown", "TADD_OnKeyDown(this);");
}

private string GetTaDdlJS()
{
StringBuilder sbJS = new StringBuilder();
sbJS.AppendLine(@"// Type Ahead DDL JavaScript");
sbJS.AppendLine(@"var typeAheadData = {");
sbJS.AppendLine(@" keyStrokes:'',");
sbJS.AppendLine(@" focusDDLId:'',");
sbJS.AppendLine(@" ResetOnNewDDLRequest:function(id) ");
sbJS.AppendLine(@" {");
sbJS.AppendLine(@" if (this.focusDDLId != id){");
sbJS.AppendLine(@" this.focusDDLId=id; this.keyStrokes='';");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" },");
sbJS.AppendLine(@" ClearTyping:function(){");
sbJS.AppendLine(@" // Reset the type ahead.");
sbJS.AppendLine(@" this.keyStrokes='';");
sbJS.AppendLine(@" window.status='';");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@"};");
sbJS.AppendLine(@"");

sbJS.AppendLine(@"function TADD_OnKeyDown(tb){");
sbJS.AppendLine(@" if (event.ctrlKey || event.shiftKey || event.altKey)");
sbJS.AppendLine(@" return;");
sbJS.AppendLine(@" if (event.keyCode >= 112 && event.keyCode <=123) // F1-F12 keys");
sbJS.AppendLine(@" return; ");
sbJS.AppendLine(@" ");
sbJS.AppendLine(@" typeAheadData.ResetOnNewDDLRequest(tb.id);");
sbJS.AppendLine(@"");
sbJS.AppendLine(@" switch (event.keyCode){");
Title: Updated JavaScript   
Name: Austin Lawlor
Date: 2006-10-23 3:56:34 PM
Comment:
First let me say "Thank You" for taking the time to create and post this; this was exactly what I was looking for.

Attached is an updated OnPreRender() method and a new method called GetTaDdlJS. These should both be placed in the TADropDown class when making the conrtol.

I updated the JavaScript to include a few enhancements. These include:
a)Added a New Method (ClearTyping()) for the typeAheadData object that clears the StatusBar and the previously used keyStrokes.
b)Commented each of the keyCode case stements.
c)Added quite a few keys that should be ignored.
d)Made the Tab and Enter keys act the same.
e)Pressing the Esc key fires the new ClearTyping() method so the user can start over without having to Backspace all entered letters.

/**********Updated Code; Place in TADropDown class *****/
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
Type type = GetType();
if (!Page.ClientScript.IsClientScriptBlockRegistered(type, "TADropDownScript"))
{
Page.ClientScript.RegisterClientScriptBlock(type, "TADropDownScript", GetTaDdlJS(), true);
}

Attributes.Add("onKeyDown", "TADD_OnKeyDown(this);");
}

private string GetTaDdlJS()
{
StringBuilder sbJS = new StringBuilder();
sbJS.AppendLine(@"// Type Ahead DDL JavaScript");
sbJS.AppendLine(@"var typeAheadData = {");
sbJS.AppendLine(@" keyStrokes:'',");
sbJS.AppendLine(@" focusDDLId:'',");
sbJS.AppendLine(@" ResetOnNewDDLRequest:function(id) ");
sbJS.AppendLine(@" {");
sbJS.AppendLine(@" if (this.focusDDLId != id){");
sbJS.AppendLine(@" this.focusDDLId=id; this.keyStrokes='';");
sbJS.AppendLine(@" }");
sbJS.AppendLine(@" },");
sbJS.AppendLine(@" ClearTyping:function(){");
sbJS.AppendLine(@" /
Title: List Items supplied by database   
Name: Gary
Date: 2006-10-18 3:19:50 PM
Comment:
I populate my drop down lists from "code tables" in my database. Can this solution be modified to search on items added in the drop down lists' load events? Thx, Gary
Title: Does not work with Atlas   
Name: Matthew Atherton
Date: 2006-10-04 11:51:33 PM
Comment:
I implemented the code in VB and it worked fine. Then I put an Atlas UpdatePanel around it, and all I get in the status bar is "Error on page", and none of the functionality works anymore. Take away the Atlas UpdatePanel, and everything works. Any idea on what modifications need to be made to use this code on an Atlas-enabled page?
Title: Visual Studio 2003 C#   
Name: Randy
Date: 2006-09-06 1:10:16 PM
Comment:
I am using Visual Studio 2003. The C# PageLoad code does not work because of Event differences. Could anybody help with the proper code to Regester the Javascript appropriatly in that version.

Thanks
Title: VB for step 3, and recognition for other characters   
Name: Peter Brunone
Date: 2006-09-05 4:00:44 PM
Comment:
Dave, here's the code above in VB.NET (this may vary depending on which version of ASP.NET you're using):

Dim typ As Type = GetType()
If Page.ClientScript.IsClientScriptIncludeRegistered(typ,js) = False Then
Page.ClientScript.RegisterClientScriptInclude(typ, js, js)
ddlTest.Attributes.Add("onkeydown", "TADD_OnKeyDown(this);")
End If


As for Helenmary's question, you'd need to check for the keycode "222", which represents the apostrophe key.
Title: RE: do not write in web folder.   
Name: Jason Dittrich
Date: 2006-08-24 9:06:27 AM
Comment:
The above comment regarding setting the js as a constant instead works well. No permissions issues occur using that method.
Title: How to call from VB.NET   
Name: Dave H
Date: 2006-08-24 8:23:34 AM
Comment:
I am not versed in C#; can you show me the code I would need to implement this in a VB.NET page (step #3)? Its exactly what I need if I can figure that out!
Title: Is there a way to check for Single Quote/Apostrophe?   
Name: Helenmary Cody
Date: 2006-07-21 11:32:28 AM
Comment:
I translated this into VB and it works great! The only additional thing I would like it to do is to have it allow the apostrophe as one of the typed characters (right now it comes back as "Not found"). I assume I have to add something to the Java-script file, but since I don't have much experience in Java-script nothing I've tried seems to work. Is it even possible? Thanks!
Title: Do not write in the Web folder   
Name: Richard Tang
Date: 2006-06-07 2:17:26 PM
Comment:
A suggestion:
Do not write the JavaScript file to the web folder. In some case it may cause AppDomain to be reset in .Net 2.0. Also write access need be granted. Instead, we can define the JavaScript in a string const and register with a different function:
string const _JAVA_SCRIPT = @"
....
....
";
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
Type type = this.GetType();
if (! if (!Page.ClientScript.IsClientScriptBlockRegistered(type, _JAVA_SCRIPT_KEY))
{
Page.ClientScript.RegisterClientScriptBlock(type, _JAVA_SCRIPT_KEY, _JAVA_SCRIPT, true);
}
Attributes.Add("onKeyDown", "TADD_OnKeyDown(this);");
}
Title: Works Great in VS2003 and 2005   
Name: Greg Jonston
Date: 2006-04-08 8:56:08 PM
Comment:
Thanks for the article and keep up the good work!

I was able to easily convert the article from 2005 Web Server Control to a 2003 Web Server Control. If your having trouble with this then try one of Microsoft's 2003 Web Server Control tutorials.
Title: Re: Framework 1.1.   
Name: Michael Libby
Date: 2006-03-23 12:50:43 PM
Comment:
Add the control in the .Net 2003 Toolbox by right clicking on the toolbox, select add/remove items. Select the .Net Framework Components tab and click the browse button. Find your dll, press ok, and ok. Now you should be able to drag the control from your toolbar to the web form.
Title: Web Control Library in .NET 1.1   
Name: Mayank
Date: 2006-03-23 11:03:20 AM
Comment:
Hi! Michael,
I just got the first part of the article to work, but caould not get the web control library part to work. Its not giving me any compile errors but at the same time, on adding the reference to the MyWebControls.dll (and including the MyWebControls project) to the application, the Type-Ahead DDL does not appear in the toolbox. I have this working in the VS 2005 but not in 2003.

Thanks...
Title: Granting Directory Permissions - Steps   
Name: Author - Michael Libby
Date: 2006-03-03 10:20:45 AM
Comment:
The following steps are for your own IIS Web Server and are not applicable to a web host provider. Your web host provider should provide alternate instructions.

1. Disable simple file sharing - Open MS Explorer and select menu options Tools, and Folder Options. In the Folder Options Dialog select the View Tab. Now find and uncheck "Use simple file sharing". Press the OK button.

2. Open the Select Users or Groups Dialog - Using MS Explorer browse to your web applicatin's directory. Right click on the directory, select properties, security tab, and then click the Add button. From the Select Users or Groups dialog press the Advanced button.

3. Assign write permissions - In the Select Users or Groups Dialog click the Find Now button and select one of the following from the list:
- ASP.Net if using Windows 2000
- Network Service if using XP
Now click OK, and OK again. You should be back to the Properties Dialog's Security Tab. Now with Network Service or ASP.Net selected check the allow write checkbox. Click OK.

Your ASP.Net application should now be able to write to its directory. This gets a bit complicated. Please let me know if anyone knows of an easier way.
Title: glossed over step 6, write permissions   
Name: Martin Brice
Date: 2006-03-02 12:15:58 PM
Comment:
You kind of glossed over step 6, the setting the runtime permissions to the directory. Can you expand on this? Also, what are the security implications of this? Is this something deployed/bought applications commonly do?

Thanks.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-06-27 3:14:12 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search