Click here to Skip to main content
Click here to Skip to main content

Select As You Type Behavior in Internet Explorer Comboboxes

, 24 Feb 2007
Rate this:
Please Sign up or sign in to vote.
Makes ordinary Internet Explorer comboboxes select as the user types

Introduction

Selecting elements from a browser combobox with a lot of elements is a fairly common, yet annoying task, primarily because of the lack of select-as-you-type behavior. Atleast in Internet Explorer, each keypress selects the first element in the combobox starting with the key pressed, so typing in the first two letters of the element to select will not work as expected. This article provides a short piece of JavaScript code that you can use to provide the select-as-you-type behavior, with very few modifications.

How It Works

The basic idea is to capture and append keypresses on a combobox and then look for elements in the combobox starting with the list of keys pressed by the user. Here is the code in its entirety:

var keysPressed = [];

function selectAsYouType(e)
{
    var keyChar; var keyNum;
    var comboBox;
    if (window.event) // Internet Explorer
    {
        keyNum = e.keyCode;            
    }
    else
    {
        return true; // browser doesn't support DOM, do default processing.
    }
    
    keyChar = String.fromCharCode(keyNum);
    comboBox = e.srcElement;
    
    if (!comboBox)
    {
        return true; // if DOM didn't work, do default processing
    }
    if (keyNum == 27) // Esc key
    {
        clearKeysPressed(comboBox);
    }
    else
    {
        return selectElement(comboBox, keyChar);
    }
    return true;
}

function clearKeysPressed(e)
{
    if (e.srcElement)
        keysPressed[e.srcElement]="";
}

function selectElement(comboBox, keyChar)
{
    var i = 0;
    var keysPressedSoFar =     keysPressed[comboBox] || "";
    keysPressedSoFar += keyChar;
    keysPressed[comboBox] = keysPressedSoFar;
    var options = comboBox.options;
    for (i = 0; i<options.length; ++i)
    {
        if (options[i].text.toUpperCase().indexOf
                                          (keysPressedSoFar.toUpperCase(), 0) == 0)
        {
            comboBox.selectedIndex = i;
            return false; // don't do default processing
        }
    }
    // didn't match start of any option, so reset keysPressed to just this key
    keysPressed[comboBox] = String(keyChar); 
    return true;        
}

keysPressed is a global array that stores the keysPressed for each combobox in the page. Each combobox that needs the select-as-you-type behavior would need to add two handlers:

  1. onkeypress="return selectAsYouType(event)" - This captures keypresses on the combobox
  2. onblur="clearKeysPressed(event)" - This clears off the keyboard cache (for that combobox) when focus moves out of the combobox

For example:

<select onkeypress="return selectA(event)" onblur="clearKeysPressed(event)">
    <option>A</option>
    <option>B</option>
    <option>AB</option>
    <option>ABC</option>
    <option>C</option>
</select>

The code is fairly straightforward. The selectElement function takes the current key pressed, appends it to the keys pressed so far and checks if any element in the combobox starts with a string made up of keysPressedSoFar. If there is no match, it returns true to revert to the default behavior of the browser.

Points of Interest

A possible improvement would be to use a better algorithm to search for elements starting with a particular string. This code has been tested with comboboxes containing ~2800 elements (Click here for an example) without any performance problems.

History

  • Initial post - 12:11 PM 2/24/2007

License

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

About the Author

S. Senthil Kumar
Software Developer Atmel R&D India Pvt. Ltd.
India India
I'm a 27 yrs old developer working with Atmel R&D India Pvt. Ltd., Chennai. I'm currently working in C# and C++, but I've done some Java programming as well. I was a Microsoft MVP in Visual C# from 2007 to 2009.
 
You can read My Blog here. I've also done some open source software - please visit my website to know more.

Comments and Discussions

 
GeneralSelection reset PinmemberBorki28-Feb-07 8:13 
GeneralRe: Selection reset PinmemberS. Senthil Kumar1-Mar-07 6:36 
GeneralSeems to be working everywhere... Pinmembersameeraperera24-Feb-07 15:24 
GeneralRe: Seems to be working everywhere... PinmemberS. Senthil Kumar25-Feb-07 5:26 

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 | Mobile
Web02 | 2.8.140721.1 | Last Updated 24 Feb 2007
Article Copyright 2007 by S. Senthil Kumar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid