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

 
GeneralGreat article Pin
Shail_Srivastav5-Mar-09 6:06
Shail_Srivastav5-Mar-09 6:06 
QuestionDropDown List ASP.Net Control wih autosearch and popu the tooltip Pin
jesusuda31-Jan-09 0:39
jesusuda31-Jan-09 0:39 
Generalnot working in IE7!!! Pin
rotemno126-Mar-08 2:20
rotemno126-Mar-08 2:20 
QuestionHow to use source code Pin
George Branch29-Feb-08 4:16
George Branch29-Feb-08 4:16 
QuestionWhat is the roughly max no. of items it can handle? Pin
abhiutd17-Oct-07 4:32
abhiutd17-Oct-07 4:32 
QuestionUpdated code Pin
Premnathj2-Aug-07 4:15
Premnathj2-Aug-07 4:15 
QuestionHow to change color of Dropdownlist border (IE) Pin
Tran Huynh Long25-Jul-07 15:44
Tran Huynh Long25-Jul-07 15:44 
GeneralTHE tooltip is not appear!! Pin
Bennyzhang22-Jun-07 17:45
Bennyzhang22-Jun-07 17:45 
the tooltip is not appear!!

Bennyzhang
Best Wishes!

QuestionTabbing out of dropdown control with autopostback set to false Pin
joalonzo200615-Mar-07 6:09
joalonzo200615-Mar-07 6:09 
General&#1050;&#1086;&#1089;&#1103;&#1082; Pin
tyman5-Feb-07 3:09
tyman5-Feb-07 3:09 
AnswerRe: Pin
Anatoliy Khotin6-Feb-07 20:35
Anatoliy Khotin6-Feb-07 20:35 
GeneralRe: Pin
tyman6-Feb-07 21:05
tyman6-Feb-07 21:05 
AnswerRe: Pin
Anatoliy Khotin7-Feb-07 1:16
Anatoliy Khotin7-Feb-07 1:16 
GeneralRe: Pin
tyman7-Feb-07 2:24
tyman7-Feb-07 2:24 
GeneralExtra Column Pin
Member 149724129-Jan-07 3:19
Member 149724129-Jan-07 3:19 
AnswerRe: Extra Column Pin
Anatoliy Khotin6-Feb-07 21:05
Anatoliy Khotin6-Feb-07 21:05 
QuestionIs there any updates to the code? Pin
Premnathj2-Aug-07 4:14
Premnathj2-Aug-07 4:14 
GeneralExtra Column Pin
Member 149724129-Jan-07 3:19
Member 149724129-Jan-07 3:19 
QuestionTooltip text is not displaying [modified] Pin
v_pratap_g11-Sep-06 0:54
v_pratap_g11-Sep-06 0:54 
AnswerRe: Tooltip text is not displaying Pin
Anatoliy Khotin12-Sep-06 4:52
Anatoliy Khotin12-Sep-06 4:52 
GeneralRe: Tooltip text is not displaying Pin
v_pratap_g19-Sep-06 3:14
v_pratap_g19-Sep-06 3:14 
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 

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.