[JS] Filtering Large Select Lists

JSP&JavaScript&HTML
[JS] Filtering Large Select Lists

헤르메스의날개 2010. 9. 14. 10:37
728x90
원문 : http://www.barelyfitz.com/projects/filterlist/index.php/3
<HTML>
<HEAD>


<!-- Load the javascript code -->
<SCRIPT type=text/javascript src='\"filterlist.js\"'></SCRIPT>

<H1>Filterlist Example</H1>
<FORM name=myform action="">

<SELECT size=5 name=myselect> <OPTION>Keanu Reeves<OPTION>Laurence Fishburne<OPTION>Monica Bellucci<OPTION>Daniel Bernhardt<OPTION>Nona Gaye<OPTION>Lachy Hulme<OPTION>Nathaniel Lees<OPTION>Harry J. Lennix<OPTION>Matt McColm<OPTION>Carrie-Anne Moss<OPTION>Collin Chou<OPTION>Genevieve O'Reilly<OPTION>Harold Perrineau Jr.<OPTION>Jada Pinkett Smith<OPTION>Adrian Rayment<OPTION>Neil Rayment<OPTION>Bruce Spence<OPTION>Hugo Weaving<OPTION>Lambert Wilson<OPTION>Anthony Wong</OPTION></SELECT>

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

<P>
Filter:
<A title="Clear the filter" href="javascript:myfilter.reset()">Clear</A>
<A title="Show items starting with A" href="javascript:myfilter.set('^A')">A</A>
<A title="Show items starting with B" href="javascript:myfilter.set('^B')">B</A>
<A title="Show items starting with C" href="javascript:myfilter.set('^C')">C</A>
<A title="Show items starting with D" href="javascript:myfilter.set('^D')">D</A>
<A title="Show items starting with E" href="javascript:myfilter.set('^E')">E</A>
<A title="Show items starting with F" href="javascript:myfilter.set('^F')">F</A>
<A title="Show items starting with G" href="javascript:myfilter.set('^G')">G</A>
<A title="Show items starting with H" href="javascript:myfilter.set('^H')">H</A>
<A title="Show items starting with I" href="javascript:myfilter.set('^I')">I</A>
<A title="Show items starting with J" href="javascript:myfilter.set('^J')">J</A>
<A title="Show items starting with K" href="javascript:myfilter.set('^K')">K</A>
<A title="Show items starting with L" href="javascript:myfilter.set('^L')">L</A>
<A title="Show items starting with M" href="javascript:myfilter.set('^M')">M</A>
<A title="Show items starting with N" href="javascript:myfilter.set('^N')">N</A>
<A title="Show items starting with O" href="javascript:myfilter.set('^O')">O</A>
<A title="Show items starting with P" href="javascript:myfilter.set('^P')">P</A>
<A title="Show items starting with Q" href="javascript:myfilter.set('^Q')">Q</A>
<A title="Show items starting with R" href="javascript:myfilter.set('^R')">R</A>
<A title="Show items starting with S" href="javascript:myfilter.set('^S')">S</A>
<A title="Show items starting with T" href="javascript:myfilter.set('^T')">T</A>
<A title="Show items starting with U" href="javascript:myfilter.set('^U')">U</A>
<A title="Show items starting with V" href="javascript:myfilter.set('^V')">V</A>
<A title="Show items starting with W" href="javascript:myfilter.set('^W')">W</A>
<A title="Show items starting with X" href="javascript:myfilter.set('^X')">X</A>
<A title="Show items starting with Y" href="javascript:myfilter.set('^Y')">Y</A>
<A title="Show items starting with Z" href="javascript:myfilter.set('^Z')">Z</A>

<P>

<!--
Note: if you have a very large select list,
you should deactivate the real-time filtering
on the INPUT field below - remove the onKeyUp attribute.
-->
Filter by regular expression:<br />



<INPUT onkeyup=myfilter.set(this.value) name=regexp>
<INPUT onclick=myfilter.set(this.form.regexp.value) value=Filter type=button>
<INPUT onclick="myfilter.reset();this.form.regexp.value=''" value=Clear type=button>

<br />




<INPUT onclick=myfilter.set_ignore_case(!this.checked) type=checkbox name=toLowerCase>
Case-sensitive

</FORM>
728x90