sophiaknows | codebase > javascript

Source/Downloads

In General: This page demonstrates a simple automated 'typedown' search of an extended list of options using a paired set of text-input select-menu controls.

As characters are entered in the text-input, the original select options are replaced with a list including only those options containing matches for the typed characters

The code is fully plug-n-play. The functions automatically retrieve their working values directly from the inline properties of a specified form select. The typedown control can be integrated with an existing form select with a single line of custom code, and even supports multiple text-input/select-menu pairs in a single page.

TypeDown 1

TypeDown 2

The control works with virtually any extended list of names and values and makes an excellent user friendly addition to an online contact lists, product and/or site directories.

Select here for an example of the control integrated with a JavaScript contact list .

<head>
<script type="text/javascript">
<!--
/* --------------------------------- */
/*     SOPHIAKNOWS: JAVASCRIPT       */
/* --------------------------------- */
/*         FORM TYPEDOWN             */
/* --------------------------------- */
/*  Created:  2000-03-15             */
/*  Issued:   2000-03-15             */
/*  Modified: 2005-01-17             */
/*  Component HTML Form              */
/*  Author:   Tony Pisarra           */
/*            Sophiaknows.com        */
/* --------------------------------- */
/* --------------------------------- */


/*   TYPEDOWN (begin main) */

/*   TYPEDOWN (begin define objects) */

function optionprops() {
    this.o_value=new Array();
    this.o_text=new Array();
    }

var options=new Array();

/*   TYPEDOWN (end define objects) */

/*   TYPEDOWN (begin init select) */

function InitSelectVals(s) {
    options[s.name]=new optionprops();
    for(i=0;i<s.length;i++) {
        options[s.name].o_value[i]=s.options[i].value;
        options[s.name].o_text[i]=s.options[i].text;
        }
    }

/*   TYPEDOWN (begin init global selects) */
function InitSelects() {
    for(f=0;f<document.forms.length;f++) {
        for(e=0;e<document.forms[f].length;e++) {
            if(document.forms[f].elements[e].name
            && document.forms[f].elements[e].type.indexOf('select')>-1) {
                InitSelectVals(document.forms[f].elements[e]);
                }
            }
        }
    }
/*   TYPEDOWN (end init global selects) */

/*   TYPEDOWN (end initialize objects) */

/*   TYPEDOWN (begin typedown) */

function TypeDown(s,t) {
   var y=0;                                     
   var suggestions=new optionprops();           
   for(m=0;m<options[s.name].o_text.length;m++) {
      if(options[s.name].o_text[m].toLowerCase().indexOf(t.value.toLowerCase())>-1) {
         suggestions.o_text[y]=options[s.name].o_text[m];
         suggestions.o_value[y]=options[s.name].o_value[m];
         y++;                                              
         }
      }
   s.length=suggestions.o_text.length;                     
   for(i=0;i<suggestions.o_text.length;i++) {           
      s.options[i].text=suggestions.o_text[i];
      s.options[i].value=suggestions.o_value[i];      
      }
   s.selectedIndex=0;                                      
   }

/*   TYPEDOWN (end typedown) */


/*   TYPEDOWN (end main) */
-->
</script>
</head>
<BODY onload="InitSelects()">
<FORM name="eg2">
<p>Typedown 1
<input type='text' 
   onKeyUp="TypeDown(this.form.example_1,this)" />

<select name="example_1" size='5'>
   <option value="1">One
   <option value="2">Two
   <option value="3">Three
   <option value="4">Four
   <option value="5">Five
   <option value="6">Six      
   <option value="7">Seven
   <option value="8">Eight
   <option value="9">Nine
   <option value="10">Ten      
</select>

<p>Typedown 2
<input type='text' 
   onKeyUp="TypeDown(this.form.example_2,this)" />
<select name="example_2" size='5'>
   <option value="1">One
   <option value="2">Two
   <option value="3">Three
   <option value="4">Four
   <option value="5">Five
   <option value="6">Six      
   <option value="7">Seven
   <option value="8">Eight
   <option value="9">Nine
   <option value="10">Ten      
</select>

</FORM>
</BODY>

Getting Started: The typedown subroutines are collected in a file called typedown.js. You can access the code in a your pages by downloading the file and adding the following line to the head (or top) of an HTML file:

<script src="typedown.js" type="text/javascript"></script>

To automate one or more select menus in an HTML document add the following line of code to the document's BODY onload event attribute:

<BODY onload="InitSelects()">

The document must contain at least a minimal forms control set. A minimal forms control set includes a typedown text-input and a paired target select-menu:

<FORM name="eg1">

<input type='text' 
   onKeyUp="TypeDown(this.form.example,this)" />

<select name="example" size='5'>
   <option value="1">One
   <option value="2">Two
   <option value="3">Three
   <option value="4">Four
   <option value="5">Five
   <option value="6">Six      
   <option value="7">Seven
   <option value="8">Eight
   <option value="9">Nine
   <option value="10">Ten      
</select>

</FORM>

The Typedown Input:

The typedown input calls the core function TypeDown() as the handler of its onKeyUp event. Each time a keyboard character is entered or edited in the input a call is sent to TypeDown().

<input type='text' 
   onKeyUp="TypeDown(this.form.example,this)" />

The call to TypeDown(s,t) takes two parameters (s and t) where:

s is a reference to the target select object (this.form.control-name); and

t is a reference to the text input itself (or in this context, the keyword this)

The text input does not have to be named for purposes of the typedown function (and will not be submitted, i.e. will not be successful, if left unnamed).

The Automated Select:

Automated select controls must have a name value assigned to a standard NAME attribute:.

<SELECT NAME="name">
[options]
</SELECT>

The NAME currently must be unique both to the form containing the control and distinct from the NAME of any other select the same page.

<BODY onload="InitSelects()">
<FORM name="eg2">
<p>Typedown 1
<input type='text' 
   onKeyUp="TypeDown(this.form.example_1,this)" />

<select name="example_1" size='5'>
   <option value="1">One
   <option value="2">Two
   <option value="3">Three
   <option value="4">Four
   <option value="5">Five
   <option value="6">Six      
   <option value="7">Seven
   <option value="8">Eight
   <option value="9">Nine
   <option value="10">Ten      
</select>

<p>Typedown 2
<input type='text' 
   onKeyUp="TypeDown(this.form.example_2,this)" />
<select name="example_2" size='5'>
   <option value="1">One
   <option value="2">Two
   <option value="3">Three
   <option value="4">Four
   <option value="5">Five
   <option value="6">Six      
   <option value="7">Seven
   <option value="8">Eight
   <option value="9">Nine
   <option value="10">Ten      
</select>

</FORM>
</BODY>