Filtering Large Select Lists
The following example shows several ways of filtering the select list.
- 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 value="filter this">or filter this
- Case-sensitive or ignore case
TutorialFor best results, download the example HTML file and use it as a template.
- 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>
- After the SELECT list, initialize a filterlist object. Use the names that you gave your FORM and your SELECT list.
- To filter the select list, use the set method:
To reset the select list, use the reset method:
To change the case-sensitive flag, use the set_ignore_case method:
If you find this script useful a small donation would be appreciated!
© 2003 Patrick Fitzgerald, All Rights Reserved
© 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