Click here to Skip to main content
15,907,281 members
Articles / Web Development / HTML

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

Rate me:
Please Sign up or sign in to vote.
4.28/5 (30 votes)
15 Oct 20064 min read 240.7K   1.2K   96   68
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 propertyTypeDescription
ToolTipHideboolGets or sets the visibility of the tooltip; false to show the tooltip, true not to show.
ToolTipBackColorColorGets or sets the background color.
ToolTipBorderColorColorGets or sets the border color.
ToolTipBorderStyleBorderStyleGets or sets the border style.
ToolTipBorderWidthUnitGets or sets the border width.
ToolTipFontFamilystringGets or sets an ordered array of font names.
ToolTipFontSizeFontUnitGets or sets the font size.
ToolTipFontBoldboolGets or sets a value that indicates whether the font is bold.
ToolTipForeColorColorGets or sets the color of the text.
ToolTipOffsetLeftintGets 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.
ToolTipOffsetTopintGets 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.
ToolTipPaddingUnitGets or sets the amount of space to insert between the text and the border.
ToolTipInitialWidthUnitGets or sets the initial width.
ToolTipZIndexintGets or sets the z-index.
ToolTipSaveTextboolGets 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:

Image 2

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.

JavaScript
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:

JavaScript
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.

JavaScript
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:

JavaScript
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.

JavaScript
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


Written By
Web Developer
Ukraine Ukraine
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralLittle problem Pin
dr S.A.f.27-Apr-06 3:42
dr S.A.f.27-Apr-06 3:42 
GeneralRe: Little problem Pin
Anatoliy Khotin10-May-06 19:38
Anatoliy Khotin10-May-06 19:38 
AnswerRe: Little problem solved Pin
Ondra Jires22-Sep-06 2:01
Ondra Jires22-Sep-06 2:01 
GeneralRe: Little problem solved Pin
Anatoliy Khotin15-Oct-06 9:35
Anatoliy Khotin15-Oct-06 9:35 
GeneralRe: Little problem solved Pin
Troye Stonich12-Feb-07 9:58
Troye Stonich12-Feb-07 9:58 
GeneralThe OnSelectedIndexChanged event Pin
wasouthpnt4-Apr-06 8:12
wasouthpnt4-Apr-06 8:12 
GeneralRe: The OnSelectedIndexChanged event Pin
Anatoliy Khotin19-Apr-06 10:26
Anatoliy Khotin19-Apr-06 10:26 
GeneralRe: The OnSelectedIndexChanged event Pin
wasouthpnt20-Apr-06 7:31
wasouthpnt20-Apr-06 7:31 
It will be fired when user changes the selected option in a select object by mouse or presses Enter key

Don't you mean "AND" not "or" in your statement above? I can't get the event to fire unless I press enter or loose focus after changing selection. Yes I put AutoPostback=True.

Thanks

-- modified at 13:33 Thursday 20th April, 2006
GeneralRe: The OnSelectedIndexChanged event Pin
Anatoliy Khotin21-Apr-06 0:35
Anatoliy Khotin21-Apr-06 0:35 
GeneralSkinID Property Pin
mirkomes23-Mar-06 1:54
mirkomes23-Mar-06 1:54 
GeneralRe: SkinID Property Pin
Anatoliy Khotin19-Apr-06 10:29
Anatoliy Khotin19-Apr-06 10:29 
GeneralThanks for the code Pin
Oliver Haskell16-Mar-06 2:28
Oliver Haskell16-Mar-06 2:28 
GeneralRe: Thanks for the code Pin
serberwww16-Mar-06 4:28
serberwww16-Mar-06 4:28 
GeneralRe: Thanks for the code Pin
Anatoliy Khotin19-Mar-06 5:27
Anatoliy Khotin19-Mar-06 5:27 
GeneralRe: Thanks for the code Pin
Oliver Haskell20-Mar-06 22:02
Oliver Haskell20-Mar-06 22:02 
GeneralRe: Thanks for the code Pin
madval22-Mar-06 4:39
madval22-Mar-06 4:39 
GeneralRe: Thanks for the code Pin
llgsadmin23-Mar-06 0:03
llgsadmin23-Mar-06 0:03 
GeneralRe: Thanks for the code Pin
Oliver Haskell23-Mar-06 4:49
Oliver Haskell23-Mar-06 4:49 
GeneralRe: Thanks for the code Pin
gkurtz14-Aug-06 2:16
gkurtz14-Aug-06 2:16 
GeneralRe: Thanks for the code Pin
Oliver Haskell15-Aug-06 1:48
Oliver Haskell15-Aug-06 1:48 
GeneralExactly what I was looking for - Slight issue Pin
Shayd14-Mar-06 8:27
Shayd14-Mar-06 8:27 
GeneralRe: Exactly what I was looking for - Slight issue Pin
Anatoliy Khotin15-Mar-06 0:45
Anatoliy Khotin15-Mar-06 0:45 
GeneralRe: Exactly what I was looking for - Slight issue Pin
Shayd15-Mar-06 4:19
Shayd15-Mar-06 4:19 
GeneralRe: Exactly what I was looking for - Slight issue Pin
Anatoliy Khotin15-Mar-06 23:20
Anatoliy Khotin15-Mar-06 23:20 
GeneralRe: Exactly what I was looking for - Slight issue Pin
Docster16-Mar-06 10:23
Docster16-Mar-06 10:23 

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.