Click here to Skip to main content
11,702,130 members (65,199 online)
Click here to Skip to main content

DropDownList and ListBox ASP.NET controls with autosearch and popup tooltip

, 15 Oct 2006 187.3K 1K 98
Rate this:
Please Sign up or sign in to vote.
Simple and very useful addition to the standard DropDownList and ListBox controls.

Sample Image - xNetComponents.gif

Introduction

When I was involved in a project which used many ASPX pages with DropDownLists and ListBoxs for selecting persons, departments and etc., my customer asked me if he could type the characters on his keyboard and select the suitable item. And, I tried to make work easier for him. At first, it was only JavaScript code, and now it has ASP.NET server controls. So, I'd like to describe two ASP.NET server controls: xNetDropDownList and xNetListBox, with the possibility to move the focus to the first most suitable item on the list when a user types in characters on the keyboard.

Background

The principle of work for both components is similar; therefore, I will describe xNetDropDownList. On a client-side element xNetDropDownList is represented as an HTML <select> box. When an element receives focus, a tooltip appears above it. The entered characters are represented in the Tooltip and the focus moves to the first suitable item on the list. Pressing Escape deletes all the entered characters and the focus is moved to the first item. The backspace key deletes the last entered character. The focus is moved to the item on the list, corresponding the text in the Tooltip after deleting the character. When an element loses focus, the tooltip disappears.

For correct working, the list of items must be sorted in ascending order!

Implementation

The component xNetDropDownList is inherited from System.Web.UI.WebControls.DropDownList. Several new properties were added to it. They are mainly used for setting visual parameters of the tooltip. These properties are described in the table:

Public property Type Description
ToolTipHide bool Gets or sets the visibility of the tooltip; false to show the tooltip, true not to show.
ToolTipBackColor Color Gets or sets the background color.
ToolTipBorderColor Color Gets or sets the border color.
ToolTipBorderStyle BorderStyle Gets or sets the border style.
ToolTipBorderWidth Unit Gets or sets the border width.
ToolTipFontFamily string Gets or sets an ordered array of font names.
ToolTipFontSize FontUnit Gets or sets the font size.
ToolTipFontBold bool Gets or sets a value that indicates whether the font is bold.
ToolTipForeColor Color Gets or sets the color of the text.
ToolTipOffsetLeft int Gets or sets horizontal moving of the left top point of the tooltip as the co-ordinate of the DropDownList or the ListBox. Measuring unit is a pixel. In the properties designer, just figures (integers) are typed in.
ToolTipOffsetTop int Gets or sets vertical moving of the left top point of the tooltip as the co-ordinate of the DropDownList or ListBox. Measuring unit is a pixel. In the properties designer just figures (integers) are typed in.
ToolTipPadding Unit Gets or sets the amount of space to insert between the text and the border.
ToolTipInitialWidth Unit Gets or sets the initial width.
ToolTipZIndex int Gets or sets the z-index.
ToolTipSaveText bool Gets or sets saving the typed in text in the tooltip. If true, the typed in text is saved when the element loses focus and acquires focus again. If false, the typed in text is lost.

This picture gives an explanation for the ToolTipOffsetLeft and ToolTipOffsetTop properties:

The functionality for searching a suitable item on the list is realized on the JavaScript.

The function xOnFocus() is used for creating and setting properties for the tooltip. When a <select> element receives focus the first time, a new HTML element <div> is created; otherwise, the function controls the behavior of the tooltip with settings in the ToolTipSaveText and ToolTipHide properties.

function xOnFocus(elm)
{
    var el = document.getElementById('div_' + elm.id);
    if (!el)
    {
        var xdiv = document.createElement('DIV');
        xdiv.id = 'div_' + elm.id;
        xdiv.noWrap = true;
        xdiv.style.position = 'absolute';
        
        xdiv.ToolTipText = '';
        xdiv.style.color = elm.ToolTipForeColor;
        xdiv.style.width = elm.ToolTipInitialWidth;
        xdiv.style.padding = elm.ToolTipPadding;
        xdiv.style.display  = (elm.ToolTipHide == 'false') ? 'inline' : 'none';
        xdiv.style.backgroundColor = elm.ToolTipBackColor; 
        xdiv.style.borderColor = elm.ToolTipBorderColor; 
        xdiv.style.borderStyle = elm.ToolTipBorderStyle; 
        xdiv.style.borderWidth = elm.ToolTipBorderWidth; 
        xdiv.style.fontFamily = elm.ToolTipFontFamily; 
        xdiv.style.fontSize = elm.ToolTipFontSize; 
        xdiv.style.fontWeight = elm.ToolTipFontBold;
        xdiv.style.zIndex = elm.ToolTipZIndex;

    if (document.documentElement && document.documentElement.scrollTop)
        xdiv.style.top = document.documentElement.scrollTop + 
          elm.getBoundingClientRect().top - parseInt(elm.ToolTipOffsetTop);
    else
        xdiv.style.top = document.body.scrollTop + 
          elm.getBoundingClientRect().top - parseInt(elm.ToolTipOffsetTop);
    if (document.documentElement && document.documentElement.scrollLeft)
        xdiv.style.left = document.documentElement.scrollLeft + 
          elm.getBoundingClientRect().left + parseInt(elm.ToolTipOffsetLeft);
    else
        xdiv.style.left = document.body.scrollLeft + 
          elm.getBoundingClientRect().left + parseInt(elm.ToolTipOffsetLeft);

    elm.insertAdjacentElement('afterEnd', xdiv);
    }
    else
    {
    if (document.documentElement && document.documentElement.scrollTop)
        el.style.top = document.documentElement.scrollTop + 
          elm.getBoundingClientRect().top - parseInt(elm.ToolTipOffsetTop);
    else
        el.style.top = document.body.scrollTop + 
          elm.getBoundingClientRect().top - parseInt(elm.ToolTipOffsetTop);
    if (document.documentElement && document.documentElement.scrollLeft)
        el.style.left = document.documentElement.scrollLeft + 
          elm.getBoundingClientRect().left + parseInt(elm.ToolTipOffsetLeft);
    else 
        el.style.left = document.body.scrollLeft + 
          elm.getBoundingClientRect().left + parseInt(elm.ToolTipOffsetLeft);

        if (elm.ToolTipSaveText == 'false') 
        {
            el.innerText = '';
            el.ToolTipText = '';
        }
        el.style.display  = (elm.ToolTipHide == 'false') ? 'inline': 'none';
    }
}

The function xOnBlur() hides the tooltip:

function xOnBlur(elm)
{
    var el = document.getElementById('div_' + elm.id);
    if (el) el.style.display = 'none';
}

The function xOnKeyUp() handles pressing the following keys: Esc, BackSpace, and Enter. Notice, if the property AutoPostBack is true, in addition to the standard behavior of the DropDownList and ListBox controls, an automatic postback to the server will occur when the user presses the Enter key.

function xOnKeyUp(key_event)
{
    var lb = key_event.srcElement;

    var el = document.getElementById('div_' + lb.id);
    if (el)
    {
        if (key_event.keyCode == 8)
        {
            key_event.returnValue = false;
            if (el.ToolTipText.length > 0)
                el.ToolTipText = 
                  el.ToolTipText.substr(0, el.ToolTipText.length - 1);

            el.innerText = el.ToolTipText + ' ';
            xFindItem(el.ToolTipText, lb);
        }

        if (key_event.keyCode == 27)
        {
            key_event.returnValue = false;

            el.ToolTipText = '';
            el.innerText = '';
            xFindItem(el.ToolTipText, lb);
        }

        if (key_event.keyCode == 13)
        {
            key_event.returnValue = true;
            if (lb.AutoPostBack == 'true') lb.onchange();
        }
    }
}

The function xOnKeyPress() processes alphanumeric characters:

function xOnKeyPress(key_event)
{
    var lb = key_event.srcElement;

    var el = document.getElementById('div_' + lb.id);
    if (el)
    {
        if (key_event.keyCode != 13)
        {  
            el.ToolTipText = el.ToolTipText + String.fromCharCode(key_event.keyCode); 
            el.innerText = el.ToolTipText +' ';
            xFindItem(el.ToolTipText, lb);
        }
        key_event.returnValue = false;
     }
}

The function xFindItem() is the main function, and it is responsible for searching an item on the list.

function xFindItem(s, lb)
{
    s = s.toUpperCase();
    
    var slen = s.length;
    var lblen = lb.length;
    var lbo = lb.options;
        
    if (slen == 0 && lblen > 0)
    { 
        lb.selectedIndex = 0;
        return;
    }

    for (i = 0; i < lblen; i++)
    {    
        if (lbo[i].text.toUpperCase().substr(0, slen) == s)
        {
            lb.selectedIndex = i;
            break;
        }
    }
}

The components were tested in Internet Explorer version 6.0.

Using the code

You can use this control just like any other web server control.

Examples

There are three pages included in the demo project:

  • Sample1.aspx - xNetDropDownList and xNetListBox contains the list of the last and first names entered directly through the ListItem Collection Editor. This page demonstrates the general work of the components.
  • Sample2.aspx - xNetDropDownList and xNetListBox are connected to the Northwind database (MS SQL Server). Remember to change the username and password in the connection string!
  • Sample3.aspx – presents different variants of appearance.

History

  • 10th Mar, 2006
    • Article submitted.
  • 12th Jun, 2006
    • Press the Enter key issue was resolved.
  • 18th Jun, 2006
    • The same issue with tab key was corrected.
  • 6th Aug, 2006
    • The problem with setting properties through code was resolved.
  • 15th Oct, 2006
    • The issues with the position of the tooltip after window resize, and IE6 with DOCTYPE were fixed. Thanks to Ondra Jires.

License

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

Share

About the Author

Anatoliy Khotin
Web Developer
Ukraine Ukraine
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralGreat article Pin
Shail_Srivastav5-Mar-09 6:06
memberShail_Srivastav5-Mar-09 6:06 
QuestionDropDown List ASP.Net Control wih autosearch and popu the tooltip Pin
jesusuda31-Jan-09 0:39
memberjesusuda31-Jan-09 0:39 
Generalnot working in IE7!!! Pin
rotemno126-Mar-08 2:20
memberrotemno126-Mar-08 2:20 
QuestionHow to use source code Pin
George Branch29-Feb-08 4:16
memberGeorge Branch29-Feb-08 4:16 
QuestionWhat is the roughly max no. of items it can handle? Pin
abhiutd17-Oct-07 4:32
memberabhiutd17-Oct-07 4:32 
QuestionUpdated code Pin
Premnathj2-Aug-07 4:15
memberPremnathj2-Aug-07 4:15 
QuestionHow to change color of Dropdownlist border (IE) Pin
Tran Huynh Long25-Jul-07 15:44
memberTran Huynh Long25-Jul-07 15:44 
GeneralTHE tooltip is not appear!! Pin
Bennyzhang22-Jun-07 17:45
memberBennyzhang22-Jun-07 17:45 
QuestionTabbing out of dropdown control with autopostback set to false Pin
joalonzo200615-Mar-07 6:09
memberjoalonzo200615-Mar-07 6:09 
General&#1050;&#1086;&#1089;&#1103;&#1082; Pin
tyman5-Feb-07 3:09
membertyman5-Feb-07 3:09 
Когда несколько элементов xNetDropDownList находятся друг над другом, то ToolTip нижестоящего xNetDropDownList не виден за вышестоящим элементом xNetDropDownList.
Судя по всему косяк в Z-Index, и ToolTip имеет меньший индекс, чем xNetDropDownList.
AnswerRe: Pin
Anatoliy Khotin6-Feb-07 20:35
memberAnatoliy Khotin6-Feb-07 20:35 
GeneralRe: Pin
tyman6-Feb-07 21:05
membertyman6-Feb-07 21:05 
AnswerRe: Pin
Anatoliy Khotin7-Feb-07 1:16
memberAnatoliy Khotin7-Feb-07 1:16 
GeneralRe: Pin
tyman7-Feb-07 2:24
membertyman7-Feb-07 2:24 
GeneralExtra Column Pin
Member #149724129-Jan-07 3:19
memberMember #149724129-Jan-07 3:19 
AnswerRe: Extra Column Pin
Anatoliy Khotin6-Feb-07 21:05
memberAnatoliy Khotin6-Feb-07 21:05 
QuestionIs there any updates to the code? Pin
Premnathj2-Aug-07 4:14
memberPremnathj2-Aug-07 4:14 
GeneralExtra Column Pin
Member #149724129-Jan-07 3:19
memberMember #149724129-Jan-07 3:19 
QuestionTooltip text is not displaying [modified] Pin
v_pratap_g11-Sep-06 0:54
memberv_pratap_g11-Sep-06 0:54 
AnswerRe: Tooltip text is not displaying Pin
Anatoliy Khotin12-Sep-06 4:52
memberAnatoliy Khotin12-Sep-06 4:52 
GeneralRe: Tooltip text is not displaying Pin
v_pratap_g19-Sep-06 3:14
memberv_pratap_g19-Sep-06 3:14 
AnswerRe: Tooltip text is not displaying Pin
Anatoliy Khotin15-Oct-06 9:38
memberAnatoliy Khotin15-Oct-06 9:38 
GeneralRe: Tooltip text is not displaying Pin
lamiae186-Dec-06 6:00
memberlamiae186-Dec-06 6:00 
AnswerRe: Tooltip text is not displaying Pin
Anatoliy Khotin9-Jan-07 0:21
memberAnatoliy Khotin9-Jan-07 0:21 
GeneralRe: Tooltip text is not displaying Pin
aibo9-Jan-07 2:40
memberaibo9-Jan-07 2:40 
GeneralRe: Tooltip text is not displaying Pin
Anatoliy Khotin9-Jan-07 21:50
memberAnatoliy Khotin9-Jan-07 21:50 
GeneralFocus on Listbox Pin
tcm15-Aug-06 12:10
membertcm15-Aug-06 12:10 
AnswerRe: Focus on Listbox Pin
Anatoliy Khotin6-Aug-06 4:02
memberAnatoliy Khotin6-Aug-06 4:02 
QuestionHow to set visual parameter during runtime? Pin
vernvern23-Jul-06 20:42
membervernvern23-Jul-06 20:42 
AnswerRe: How to set visual parameter during runtime? Pin
Anatoliy Khotin6-Aug-06 4:16
memberAnatoliy Khotin6-Aug-06 4:16 
GeneralAdded Features (Tab key) Pin
mBonafe12-Jun-06 5:03
membermBonafe12-Jun-06 5:03 
GeneralRe: Added Features (Tab key) Pin
Anatoliy Khotin20-Jun-06 9:36
memberAnatoliy Khotin20-Jun-06 9:36 
GeneralRe: Added Features (Tab key) Pin
mBonafe21-Jun-06 2:16
membermBonafe21-Jun-06 2:16 
GeneralThanks for sharing -- Feature Suggestions Pin
bg40412-Jun-06 4:50
memberbg40412-Jun-06 4:50 
GeneralRe: Thanks for sharing -- Feature Suggestions Pin
Anatoliy Khotin29-Jun-06 19:41
memberAnatoliy Khotin29-Jun-06 19:41 
GeneralEnterkey enabling Pin
SreeBA5-Jun-06 21:28
memberSreeBA5-Jun-06 21:28 
GeneralRe: Enterkey enabling Pin
Anatoliy Khotin6-Jun-06 3:53
memberAnatoliy Khotin6-Jun-06 3:53 
GeneralRe: Enterkey enabling Pin
SreeBA6-Jun-06 16:21
memberSreeBA6-Jun-06 16:21 
GeneralRe: Enterkey enabling Pin
Anatoliy Khotin7-Jun-06 2:41
memberAnatoliy Khotin7-Jun-06 2:41 
GeneralRe: Enterkey enabling Pin
Anatoliy Khotin12-Jun-06 0:15
memberAnatoliy Khotin12-Jun-06 0:15 
QuestionHow to skip auto-selection when press arrowkey down/up Pin
fg7228-May-06 22:00
memberfg7228-May-06 22:00 
AnswerRe: How to skip auto-selection when press arrowkey down/up Pin
Anatoliy Khotin2-Jun-06 0:21
memberAnatoliy Khotin2-Jun-06 0:21 
GeneralLittle problem Pin
dr S.A.f.27-Apr-06 3:42
memberdr S.A.f.27-Apr-06 3:42 
GeneralRe: Little problem Pin
Anatoliy Khotin10-May-06 19:38
memberAnatoliy Khotin10-May-06 19:38 
AnswerRe: Little problem solved Pin
Ondra Jires22-Sep-06 2:01
memberOndra Jires22-Sep-06 2:01 
GeneralRe: Little problem solved Pin
Anatoliy Khotin15-Oct-06 9:35
memberAnatoliy Khotin15-Oct-06 9:35 
GeneralRe: Little problem solved Pin
Troye Stonich12-Feb-07 9:58
memberTroye Stonich12-Feb-07 9:58 
GeneralThe OnSelectedIndexChanged event Pin
wasouthpnt4-Apr-06 8:12
memberwasouthpnt4-Apr-06 8:12 
GeneralRe: The OnSelectedIndexChanged event Pin
Anatoliy Khotin19-Apr-06 10:26
memberAnatoliy Khotin19-Apr-06 10:26 
GeneralRe: The OnSelectedIndexChanged event Pin
wasouthpnt20-Apr-06 7:31
memberwasouthpnt20-Apr-06 7:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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
Web03 | 2.8.150819.1 | Last Updated 15 Oct 2006
Article Copyright 2006 by Anatoliy Khotin
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid