Filtering Large Select Lists

If you have a very large HTML SELECT list, finding the correct item can be like looking for a needle in a haystack. For example, if you have a list of a couple hundred names, finding a single one can be difficult. This article describes a JavaScript technique for filtering the items in a select list so that only the matching items are shown, making it much easier to locate the desired item.

The following example shows several ways of filtering the select list.

Users	Filter
Bellucci, Monica Bernhardt, Daniel Chou, Collin Fishburne, Laurence Gaye, Nona Hulme, Lachy Lees, Nathaniel Lennix, Harry J. McColm, Matt Moss, Carrie-Anne O'Reilly, Genevieve Perrineau, Harold Jr. Pinkett Smith, Jada Rayment, Adrian Rayment, Neil Reeves, Keanu Spence, Bruce Weaving, Hugo Wilson, Lambert Wong, Anthony	Show users: All A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Filter by regular expression: Case-sensitive filtering

Features

• Easy to use, object-oriented interface
• Easy to configure: use your existing SELECT list
• Easy to extend: specify a hook function to be called when the filter changes
• Filter using regular expressions
• Filter on the value or the text of the select option:
  <option value="filter this">or filter this
• Case-sensitive or ignore case

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>

Download

• filterlist.js
  JavaScript code only
• example.html
  HTML example

If you find this script useful a small donation would be appreciated!

License

Article Copyright

© 2003 Patrick Fitzgerald, All Rights Reserved

Program License

© 2003 Patrick Fitzgerald

filterlist.js is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

Support

If you like this script donate, make an Amazon.com purchase through my links, or buy me something from my wishlist.