List Box Tweaks (Part II - The Code)

Here we present a demo and the coding - more demos can be found in the article itself. Please, note that the coding works only for Microsoft Internet Explorer 5.0 and higher.

Listbox with Type-Ahead Demo

Example: List box with type-ahead

As you can see, typing 'el', for example, takes you directly to 'Elephant'. If you type in more letters, the list box will look for the next matching entry. If it does not find one, it stays at the last selection and you can type the next letter again to find a match. To start over, just press the 'Esc' key. This will take you to the start of the list and you can then start typing a new search-string.

The Code

And here is the script code for the dropdown listbox with type-ahead. The code requires IE5.0 or higher. All the handling is done in the Javascript function "evalKey()". For using this code, include the statement onkeypress="evalKey()" into the SELECT tag of the dropdown listbox.

<script name="DDL">
<!--
// Global Vars
         
var tString = '';
var lsf = 0;	// last successful index
         
         
function evalKey() {
    // Global Variables
    var i = 0; 
    var success = false;
    var elem = event.srcElement;
    var tLowElemText = '';
    // Get the unicode char of the keypress
    var eCode = event.keyCode;
    // Check if it's a vaid ASCII Character
    if (eCode == 27){
        tString = ''; 
        elem.selectedIndex = 0;
        }
    else if ( (eCode > 31) && (eCode < 122))
        {
        // Convert the Code to the corresponding character and add to searchstring
        tString += String.fromCharCode(eCode);
        // ... and perform the search starting from the top element in the listbox
        while (success == false) 	
            {
                i = 0;
                // Convert everything to lowercase; allows an easy comparison
                var tLowString = tString.toLowerCase();
                // Compose the regexp searchstring ...
                var rExpr = eval("/^" +  tLowString + "/");
                while ((i < elem.length)&& (success == false) )	
                    {
                        tLowElemText = elem.options[i].text.toLowerCase();
                        // success: Position the listbox on the (first) found element
                        if (tLowElemText.search(rExpr) != -1)
                            {
                                elem.selectedIndex = i;
                                success = true;
                            }
                        else {
                                i++; }
                             } // while i < elem.length
                        // if nothing is found in the entire list, the last character of the
                        //searchstring is removed to allow typing the correct 'next' character
                        if (success == false) {
                            tString = tString.substr(0, tString.length-1);
                     }
              } // while success = false
        } 
        // Just for demo use: updates the span displaying the typed
        // characters; remove from code before re-using
        lchr.innerText =String.fromCharCode(eCode);
        tsf.innerText = tString;
         
        window.event.returnValue = false;
        window.event.cancelBubble = true;
}
         
// -->
</script>
     

Note: Line "else if ( (eCode > 37) && (eCode < 122))" has been changed to "else if ( (eCode > 31) && (eCode < 122))"

Final Word

This code is fairly straightforward and can be easily included into an HTML page.

by Jens Heuer, SAP AG, Usability Engineering Center