Click here to Skip to main content
13,145,774 members (72,958 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


18 bookmarked
Posted 25 Jun 2008


, 25 Jun 2008
Rate this:
Please Sign up or sign in to vote.
The Custom Control shows up a list item in the dropdown as it is typed.


The custom DropDownWithAutoComplete feature shows up a list item in the dropdown as it is typed. It is really helpful when there are a number of items in the dropdown list and the user needs to find a particular item in it. Instead of scrolling and looking for the desired item, the custom DropDownWithAutoComplete allows a user to click on the dropdown list and type the item to look for. As the starting letters of the item are typed, the item that matches the typed letters gets highlighted. Once the desired item is reached, the user can then click on the item to select it.

The user can also set a property to set the first item in the list to be 'Select'. This otherwise would have required inserting an item in the datasource.


While working on one of my projects, it came up as a requirement that in a dropdown list which contains more that 20 items, we had to use some feature that allowed a user to type the name of the item she or he is looking for and consequently that item should get highlighted in the list. This would have helped in looking for and selecting an item particularly when the dropdown contains a number of items.

The feature to set the first item as 'Select' can be used optionally by merely setting up a property.

Using the Code

The code has a single class CustomDropDown that inherits from DropDownList. The procedures and properties are explained below.

The FirstElementSelect property is of type Boolean and sets/returns a value indicating whether the first item in the list will be a Select or not.

Public Property FirstElementSelect() As Boolean
        Return _IsFirstElementSelect
    End Get
    Set(ByVal value As Boolean)
        _IsFirstElementSelect = value
    End Set
End Property

In the oninit function, i.e. when the controls are initialized, attributes are added to onkeypress and onblur event of the custom DropDownWithAutoComplete.

Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
        Me.Attributes.Add("onkeypress", "return AutoComplete(this);")
        Me.Attributes.Add("onblur", "return Reset(this);")
End Sub

The Render function used renders JavaScript to an ASP.NET dropdownlist control's output stream.

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
            Dim strScript As String = "<script></script>"

            Dim strScript1 As String = "<script></script>"

        End Sub

The Prerender event checks the boolean property FirstElementSelect. If set to true, an item 'Select' will be inserted to the existing list of items. This event is handled just before the control is rendered, so by the time all the listitems would have been added to the custom DropDownlist.

Private Sub Class1_PreRender(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.PreRender
            If FirstElementSelect = True Then
                If Not (Me.Items.Contains(New ListItem("select")) _
                    Or Me.Items.Contains(New ListItem("Select"))) Then
                    Me.Items.Insert(0, New ListItem("Select"))
                End If
            End If
        End Sub

The JavaScript function AutoComplete accepts as argument the custom DropDown that fired the event. Once the dropdownlist is selected, keypressBuffer of dropdown list stores the letters as they are typed.The JavaScript next determines the key that is pressed and appends the same to keypressBuffer. The control then loops through all the items of the dropdownlist and checks each item for a match against the stored buffer. If a match is found, that item is selected.

 function AutoComplete(obj)
    var undefined;
    if (obj.keypressBuffer == undefined)
        obj.keypressBuffer = '';

    var key = String.fromCharCode(window.event.keyCode);
    obj.keypressBuffer += key;
    obj.keypressBuffer = obj.keypressBuffer.toLowerCase();
    var iLength = obj.options.length;
    var bool=false;

    for (var i=0; i < iLength; i++)
        var strText = obj.options[i].text;
        strText = strText.toLowerCase();
        if (strText.indexOf(obj.keypressBuffer,0) == 0)
            obj.selectedIndex = i;
            return false;
    if (bool==false)
    return false;

In order to initialize the keypressBuffer, deselect the custom DropDownList by selecting/clicking elsewhere on the page. This will fire the onblur event. The function Reset that accepts custom DropDown that fired the event as argument will initialize the buffer.

function Reset(obj)


  • 25th June, 2008: Initial post


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


About the Author

Vivek Bhatnagar
Software Developer Tata Consultancy Services
India India
I have been into Web development for past 2+ years.I've worked on areas like ASP.NET,VB.Net,Web services and web application framework DotNetNuke.I'm Microsoft Certified Professional in ASP.Net.

You may also be interested in...

Comments and Discussions

Generaldoesn't work with ie 7 - ok with firefox Pin
Member 322743330-Jun-08 20:03
memberMember 322743330-Jun-08 20:03 
GeneralNice Job Pin
Saifi Hasan26-Jun-08 4:33
memberSaifi Hasan26-Jun-08 4:33 
GeneralSimple but very useful Pin
sudhu In LKO26-Jun-08 0:05
membersudhu In LKO26-Jun-08 0:05 
GeneralHI Sir Pin
chanduice25-Jun-08 21:02
memberchanduice25-Jun-08 21:02 
GeneralRe: HI Sir Pin
Vivek Bhatnagar25-Jun-08 22:32
memberVivek Bhatnagar25-Jun-08 22:32 
Generalgood job Pin
MCSDvikasmisra25-Jun-08 20:30
memberMCSDvikasmisra25-Jun-08 20:30 
GeneralRe: good job Pin
Vivek Bhatnagar25-Jun-08 20:54
memberVivek Bhatnagar25-Jun-08 20:54 
GeneralVery useful Pin
Viram25-Jun-08 19:12
memberViram25-Jun-08 19:12 

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
Web03 | 2.8.170915.1 | Last Updated 25 Jun 2008
Article Copyright 2008 by Vivek Bhatnagar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid