Click here to Skip to main content
15,860,861 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 238.4K   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

 
AnswerRe: Tooltip text is not displaying Pin
Anatoliy Khotin15-Oct-06 9:38
Anatoliy Khotin15-Oct-06 9:38 
GeneralRe: Tooltip text is not displaying Pin
lamiae186-Dec-06 6:00
lamiae186-Dec-06 6:00 
AnswerRe: Tooltip text is not displaying Pin
Anatoliy Khotin9-Jan-07 0:21
Anatoliy Khotin9-Jan-07 0:21 
GeneralRe: Tooltip text is not displaying Pin
aibo9-Jan-07 2:40
aibo9-Jan-07 2:40 
GeneralRe: Tooltip text is not displaying Pin
Anatoliy Khotin9-Jan-07 21:50
Anatoliy Khotin9-Jan-07 21:50 
GeneralFocus on Listbox Pin
tcm15-Aug-06 12:10
tcm15-Aug-06 12:10 
AnswerRe: Focus on Listbox Pin
Anatoliy Khotin6-Aug-06 4:02
Anatoliy Khotin6-Aug-06 4:02 
QuestionHow to set visual parameter during runtime? Pin
vernvern23-Jul-06 20:42
vernvern23-Jul-06 20:42 
Hi, I want to set the ToolTipOffsetLeft to some value during page load event. However, it is not working after i put the code below in the page load event.
xNetDropDownList1.ToolTipOffsetLeft = 65

Anyone knows the solution?

Thanks in advance!


AnswerRe: How to set visual parameter during runtime? Pin
Anatoliy Khotin6-Aug-06 4:16
Anatoliy Khotin6-Aug-06 4:16 
GeneralAdded Features (Tab key) Pin
mBonafe12-Jun-06 5:03
mBonafe12-Jun-06 5:03 
GeneralRe: Added Features (Tab key) Pin
Anatoliy Khotin20-Jun-06 9:36
Anatoliy Khotin20-Jun-06 9:36 
GeneralRe: Added Features (Tab key) Pin
mBonafe21-Jun-06 2:16
mBonafe21-Jun-06 2:16 
GeneralThanks for sharing -- Feature Suggestions Pin
bg40412-Jun-06 4:50
bg40412-Jun-06 4:50 
GeneralRe: Thanks for sharing -- Feature Suggestions Pin
Anatoliy Khotin29-Jun-06 19:41
Anatoliy Khotin29-Jun-06 19:41 
GeneralEnterkey enabling Pin
SreeBA5-Jun-06 21:28
SreeBA5-Jun-06 21:28 
GeneralRe: Enterkey enabling Pin
Anatoliy Khotin6-Jun-06 3:53
Anatoliy Khotin6-Jun-06 3:53 
GeneralRe: Enterkey enabling Pin
SreeBA6-Jun-06 16:21
SreeBA6-Jun-06 16:21 
GeneralRe: Enterkey enabling Pin
Anatoliy Khotin7-Jun-06 2:41
Anatoliy Khotin7-Jun-06 2:41 
GeneralRe: Enterkey enabling Pin
Anatoliy Khotin12-Jun-06 0:15
Anatoliy Khotin12-Jun-06 0:15 
QuestionHow to skip auto-selection when press arrowkey down/up Pin
fg7228-May-06 22:00
fg7228-May-06 22:00 
AnswerRe: How to skip auto-selection when press arrowkey down/up Pin
Anatoliy Khotin2-Jun-06 0:21
Anatoliy Khotin2-Jun-06 0:21 
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 

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.