Filtering Large Select Lists

Tutorial

For best results, download the example HTML file and use it as a template.

1. In the HEAD section of your HTML file, load the javascript code:

   <SCRIPT TYPE="text/javascript" SRC="filterlist.js"></SCRIPT> 

2. In the body of your HTML file, set up your FORM and your SELECT list just like you normally would. Be sure to give both your FORM and your SELECT elements a NAME attribute:

   <FORM NAME="myform" ACTION="">
   <SELECT NAME="myselect">
    <OPTION>Keanu Reeves
    <OPTION>Laurence Fishburne
   </SELECT>
   </FORM>

3. After the SELECT list, initialize a filterlist object. Use the names that you gave your FORM and your SELECT list.

   <SCRIPT TYPE="text/javascript">
   <!--
   var myfilter = new filterlist(document.myform.myselect);
   //-->
   </SCRIPT>

4. To filter the select list, use the set method:

   Filter:
   <A HREF="javascript:myfilter.set('keanu')">keanu</A>
   <A HREF="javascript:myfilter.set('fish.*')">fishburn</A>

   To reset the select list, use the reset method:

   <A HREF="javascript:myfilter.reset()">reset</A>

   To change the case-sensitive flag, use the set_ignore_case method:

   <A HREF="javascript:myfilter.set_ignore_case(false)">case-sensitive</A>
   <A HREF="javascript:myfilter.set_ignore_case(true)">ignore case</A>