Web-standard solutions for a non-standard world

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>

Page: all 1 2 3 4 next»
The next page is Download




Projects

Home : Contact Us : ©2006 BarelyFitz Designs, All Rights Reserved