About ASP.net Smart DropDownList!

NOTICE(February 14 2006): There are a problem where including the SmartDropDown List control inside a user control. The ID of the User Control will be appended at the end of the control name, however the function will pass only the original ID name of the control. To fix that bug, I have changed the code below in C# or VB. Just build the dll with the new code and it should work fine in user control.

NOTICE(November 2005): I was told that the control does not work on C# projects. I have included in this page the source code in C# submitted by Tamara Dillard. Thanks to her, you can get the .cs code from the text area in this page and build the dll file.

NOTICE(April 2004):I have received some information that the control does not work correctly on VS.net 2003. Try downloading the source code and build the binary from scratch with VS.net 2003 and use the resulting binary instead. Sorry!

One of the most annoying thing with the ASP.net generic dropdownlist control is that when it is populated with tens or hundres of records, it will take a while to browse through the list. Most browser have a default action to select the first letter keyed by the user, however it does not go beyond the first letter. The Smart Dropdownlist lets the user to type in the whole word of his/her intended selection and it will automatically select the item. I have only tested this control IE 6 with client scripting enabled. The source code is available for modification and it is free to use. Hope this helps!

How to use Smart DropDownList?

Just simply download the source code in VB or C# provided below and build the binary (.dll) file.

To add the control to your Asp.net page:

1. If you use vs.net, just simply customize the toolbox and and add the
newly built dll file . Just simply drag and drop SmartDropDownList control into your aspx pages.

2. If you use notepad simply add the register prefix at the beginning of your aspx page :

<%@ Register TagPrefix="cc1" Namespace="SmartDropDownList" Assembly="SmartDropDownList" %>

and add the control with this syntax:

<cc1:SmartDropDownList id="SmartDropDownList1" runat="server"></cc1:SmartDropDownList>

3. You can also use this for any regular static html, just simply add the script block shown below and add the javascript actions on the <SELECT> tag .

This control inherits all the properties, events, and methods of the generic Asp.net dropdownlist, therefore you can use it just like one. This control however will not work well if you set the dropdownlist to autopostback.

Demo

Just type the country you wish to select, the dropdownlist will choose the right item based on the letters you typed. Press backspace to start over.

AfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua and BarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelgiumBelizeBeninBermudaBhutanBoliviaBosnia and HerzegovinaBotswanaBouvet IslandBrazilBritish Indian Ocean TerritoryBruneiBulgariaBurkina FasoBurundiCambodiaCameroonCanadaCape VerdeCayman IslandsCentral African RepublicChadChileChinaChristmas IslandCocos (Keeling) IslandsColombiaComorosCongoCook IslandsCosta RicaCôte d'IvoireCroatia (Hrvatska)CubaCyprusCzech RepublicCongo (DRC)DenmarkDjiboutiDominicaDominican RepublicEast TimorEcuadorEgyptEl SalvadorEquatorial GuineaEritreaEstoniaEthiopiaFalkland Islands (Islas Malvinas)Faroe IslandsFiji IslandsFinlandFranceFrench GuianaFrench PolynesiaFrench Southern and Antarctic LandsGabonGambiaGeorgiaGermanyGhanaGibraltarGreeceGreenlandGrenadaGuadeloupeGuamGuatemalaGuineaGuinea-BissauGuyanaHaitiHeard Island and McDonald IslandsHondurasHong Kong SARHungaryIcelandIndiaIndonesiaIranIraqIrelandIsraelItalyJamaicaJapanJordanKazakhstanKenyaKiribatiKoreaKuwaitKyrgyzstanLaosLatviaLebanonLesothoLiberiaLibyaLiechtensteinLithuaniaLuxembourgMacao SARMacedonia, Former Yugoslav Republic ofMadagascarMalawiMalaysiaMaldivesMaliMaltaMarshall IslandsMartiniqueMauritaniaMauritiusMayotteMexicoMicronesiaMoldovaMonacoMongoliaMontserratMoroccoMozambiqueMyanmarNamibiaNauruNepalNetherlandsNetherlands AntillesNew CaledoniaNew ZealandNicaraguaNigerNigeriaNiueNorfolk IslandNorth KoreaNorthern Mariana IslandsNorwayOmanPakistanPalauPanamaPapua New GuineaParaguayPeruPhilippinesPitcairn IslandsPolandPortugalPuerto RicoQatarReunionRomaniaRussiaRwandaSamoaSan MarinoSão Tomé and PríncipeSaudi ArabiaSenegalSerbia and MontenegroSeychellesSierra LeoneSingaporeSlovakiaSloveniaSolomon IslandsSomaliaSouth AfricaSouth Georgia and the South Sandwich IslandsSpainSri LankaSt. HelenaSt. Kitts and NevisSt. LuciaSt. Pierre and MiquelonSt. Vincent and the GrenadinesSudanSurinameSvalbard and Jan MayenSwazilandSwedenSwitzerlandSyriaTaiwanTajikistanTanzaniaThailandTogoTokelauTongaTrinidad and TobagoTunisiaTurkeyTurkmenistanTurks and Caicos IslandsTuvaluUgandaUkraineUnited Arab EmiratesUnited KingdomUnited StatesUnited States Minor Outlying IslandsUruguayUzbekistanVanuatuVatican CityVenezuelaViet NamVirgin Islands (British)Virgin IslandsWallis and FutunaYemenZambiaZimbabwe

Source Code for the SmartDropDownList Control (VB.net) Imports System.ComponentModel Imports System.Web.UI <DefaultProperty("Text"), ToolboxData(">{0}:SmartDropDownList runat=server></{0}:SmartDropDownList>")> Public Class SmartDropDownList Inherits System.Web.UI.WebControls.DropDownList Dim _text As String <Bindable(True), Category("Appearance"), DefaultValue("")> Property [Text]() As String Get Return _text End Get Set(ByVal Value As String) _text = Value End Set End Property Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter) RenderBaseControl(output) End Sub Protected Overrides Sub OnPreRender(ByVal e As EventArgs) MyBase.OnPreRender(e) Page.RegisterClientScriptBlock("SmartDropDownScript", GetScriptBlock) End Sub Sub RenderBaseControl(ByVal output As System.Web.UI.HtmlTextWriter) MyBase.Attributes("onKeypress") = "return (dodefaultaction()==''); " MyBase.Attributes("onKeydown") = "return (dodefaultaction()==''); " MyBase.Attributes("onKeyup") = "return (change(" & MyBase.ClientID & "));" MyBase.Attributes("onfocus") = "txtval = '';" MyBase.Attributes("onblur") = "txtval = '';" MyBase.Render(output) End Sub Sub RenderHiddenInput(ByVal output As System.Web.UI.HtmlTextWriter) output.Write("<input type=""hidden"" value="""" name=""hidden" & MyBase.ClientID & """>") End Sub Function GetScriptBlock() As String Return ("<SCRIPT>" & _ "var txtval = '';" & _ "var curlist;" & _ "function select(trigger){ " & _ "curlist=trigger;" & _ "for (n=0;n<curlist.length;n++){" & _ "if(curlist[n].text.toLowerCase().indexOf(txtval.toLowerCase())==0){" & _ "curlist.selectedIndex=n;break;" & _ " }else{" & _ " if (n==curlist.length-1) txtval=''; curlist.selectedIndex=0;}}}" & _ "function dodefaultaction(e){ " & _ "var code; " & _ "if (!e) var e = window.event; " & _ "if (e.keyCode) code = e.keyCode; " & _ "else if (e.which) code = e.which;" & _ "if(code == '9' | code == '40' | code == '38') return ''; " & _ "else return code;}" & _ "function change(trigger){ " & _ "var code = dodefaultaction(); " & _ "if(code == ''){ txtval='';return false;} " & _ "else{" & _ "if(code == '8'){ txtval='';} " & _ "else{" & _ "txtval = txtval + String.fromCharCode(code);}select(trigger); return true;}}</SCRIPT>") End Function End Class

Source Code for the SmartDropDownList Control (C#)
Courtesy of Tamara Dillard. Special thanks!!!!
using System; using System.Web.UI; using System.Web.UI.WebControls; using System.ComponentModel; namespace MyWebControls { /// <summary> /// Summary description for SmartDropDown /// </summary> [DefaultProperty("Text"), ToolboxData("<{0}:SmartDropDown runat=server></{0}:SmartDropDown>")] public class SmartDropDown : System.Web.UI.WebControls.DropDownList { private string text; [Bindable(true), Category("Appearance"), DefaultValue("")] public string Text { get { return text; } set { text = value; } } /// <summary> /// Render this control to the output parameter specified. /// </summary> /// <param name="output"> The HTML writer to write out to </param> protected override void Render(System.Web.UI.HtmlTextWriter output) { RenderBaseControl(output); } protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); Page.RegisterClientScriptBlock("SmartDropDownScript", GetScriptBlock()); } protected void RenderBaseControl(System.Web.UI.HtmlTextWriter output) { base.Attributes["onKeypress"] = "return (dodefaultaction()==''); "; base.Attributes["onKeydown"] = "return (dodefaultaction()==''); "; base.Attributes["onKeyup"] = "return (change(" + base.ClientID + "));"; base.Attributes["onfocus"] = "txtval = '';"; base.Attributes["onblur"] = "txtval = '';"; base.Render(output); } protected void RenderHiddenInput(System.Web.UI.HtmlTextWriter output) { output.Write("<input type='hidden' value='' name='hidden" + base.ClientID + "'>"); } protected string GetScriptBlock() { string sReturn= "<SCRIPT>"; sReturn += "var txtval = '';"; sReturn += "var curlist;"; sReturn += "function select(trigger){ "; sReturn += "curlist=trigger;"; sReturn += "for (n=0;n<curlist.length;n++){"; sReturn += "if(curlist[n].text.toLowerCase().indexOf(txtval.toLowerCase())==0){"; sReturn += "curlist.selectedIndex=n;break;"; sReturn += " }else{"; sReturn += " if (n==curlist.length-1) txtval=''; curlist.selectedIndex=0;}}}"; sReturn += "function dodefaultaction(e){ "; sReturn += "var code; "; sReturn += "if (!e) var e = window.event; "; sReturn += "if (e.keyCode) code = e.keyCode; "; sReturn += "else if (e.which) code = e.which;"; sReturn += "if(code == '9' | code == '40' | code == '38') return ''; "; sReturn += "else return code;}"; sReturn += "function change(trigger){ "; sReturn += "var code = dodefaultaction(); "; sReturn += "if(code == ''){ txtval='';return false;} "; sReturn += "else{"; sReturn += "if(code == '8'){ txtval='';} "; sReturn += "else{"; sReturn += "txtval = txtval + String.fromCharCode(code);}select(trigger); return true;}}</SCRIPT>"; return sReturn; } } }

The client scripts generated by Smart DropDownList control
(you can use this in your static HTML page) <-- Add this script inside your HTML <HEAD> tag !-> <SCRIPT> var txtval = ''; var curlist; function select(trigger){ curlist=trigger; for (n=0;n<curlist.length;n++){ if(curlist[n].text.toLowerCase().indexOf(txtval.toLowerCase())==0){ curlist.selectedIndex=n; break; } else{ if (n==curlist.length-1) txtval=''; curlist.selectedIndex=0;} } } function dodefaultaction(e){ var code; if (!e) var e = window.event; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; if(code == '9' | code == '40' | code == '38') return ''; else return code;} function change(trigger){ var code = dodefaultaction(); if(code == ''){ txtval='';return false;} else{ if(code == '8'){ txtval='';} else{txtval = txtval + String.fromCharCode(code);} select(trigger); return true;}} </SCRIPT> <-- Add this java actions inside your <SELECT> control!-> <SELECT name="SmartDropDownList1" id="SmartDropDownList1" onKeypress="return (dodefaultaction()==''); " onKeydown="return (dodefaultaction()==''); " onKeyup="return (change(SmartDropDownList1));" onfocus="txtval = '';" onblur="txtval = '';"> </SELECT>

Author: Senjaya Tirtaputra
Email: senjaya@hotmail.com