Demo:

Filter:

States
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming

So I was working on my DNS Editor back end last night, while using iTunes - and I decided I want the same type of filtered list that iTunes has. About 4 hours later, I came up with this, so here it is. It really only takes two lines of code, and one class statement, to add:

HTML:
  1. <script charset="utf-8" language="javascript" type="text/javascript" />
  2. <input type="text" maxlength="10" size="8" id="filterable_filter" name="filterable_filter" />

then, in your table, just make sure your class name includes "filterable". The input box ID must be the table id plus "_filter". In addition, if you want to make a row that never gets filtered, you can include "nofilter" in the td's class name.

If you want to get the library right now, you cen grab it here. You will find the code for the demo down further.

Right now, I am filtering on the inputbox value being anywhere in each cell's text - however, since I am using a regex, it would be very easy to modify to only match at the start of the string, etc. Here within the next few weeks, I hope to mature this library to the point of have some way of specifying (perhaps based on the class) what type of match you want, as well as specifying which columns in the table you want to match against.

Thanks go to Stuart Langridge, over at Kryogenix, for ideas on handling tables unobtrusively, in his sorttable library (here). In fact, I wrote this library to be compatible with his - so you can have sortable tables, that are also filterable.

Sample code after the break

Here is the code snippet for the above example:

HTML:
  1.  
  2. <script src="http://www.lokkju.com/blog/wp-content/uploads/2006/01/filtertable.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  3. <link href="http://www.lokkju.com/blog/wp-content/uploads/2006/01/filterabledemo.css" rel="stylesheet" type="text/css" media="all" />
  4. <p><h3>Demo:</h3>
  5. <div id="filterable_demo">
  6. <strong>Filter:</strong> <input name="states_filterable_filter" id="states_filterable_filter" type="text" value="" size="10" maxlength="20" />
  7. <div id="list_div">
  8. <table id="states_filterable" class="filterable_sortable">
  9.         <tr class="nofilter">
  10.                 <th>
  11.                         States
  12.                 </th>
  13.         </tr>
  14.         <tr><td>Alabama</td></tr>
  15. <tr><td>Alaska</td></tr>
  16. <tr><td>Arizona</td></tr>
  17. <tr><td>Arkansas</td></tr>
  18. <tr><td>California</td></tr>
  19. <tr><td>Colorado</td></tr>
  20. <tr><td>Connecticut</td></tr>
  21. <tr><td>Delaware</td></tr>
  22. <tr><td>Florida</td></tr>
  23. <tr><td>Georgia</td></tr>
  24. <tr><td>Hawaii</td></tr>
  25. <tr><td>Idaho</td></tr>
  26. <tr><td>Illinois</td></tr>
  27. <tr><td>Indiana</td></tr>
  28. <tr><td>Iowa</td></tr>
  29. <tr><td>Kansas</td></tr>
  30. <tr><td>Kentucky</td></tr>
  31. <tr><td>Louisiana</td></tr>
  32. <tr><td>Maine</td></tr>
  33. <tr><td>Maryland</td></tr>
  34. <tr><td>Massachusetts</td></tr>
  35. <tr><td>Michigan</td></tr>
  36. <tr><td>Minnesota</td></tr>
  37. <tr><td>Mississippi</td></tr>
  38. <tr><td>Missouri</td></tr>
  39. <tr><td>Montana</td></tr>
  40. <tr><td>Nebraska</td></tr>
  41. <tr><td>Nevada</td></tr>
  42. <tr><td>New Hampshire</td></tr>
  43. <tr><td>New Jersey</td></tr>
  44. <tr><td>New Mexico</td></tr>
  45. <tr><td>New York</td></tr>
  46. <tr><td>North Carolina</td></tr>
  47. <tr><td>North Dakota</td></tr>
  48. <tr><td>Ohio</td></tr>
  49. <tr><td>Oklahoma</td></tr>
  50. <tr><td>Oregon</td></tr>
  51. <tr><td>Pennsylvania</td></tr>
  52. <tr><td>Rhode Island</td></tr>
  53. <tr><td>South Carolina</td></tr>
  54. <tr><td>South Dakota</td></tr>
  55. <tr><td>Tennessee</td></tr>
  56. <tr><td>Texas</td></tr>
  57. <tr><td>Utah</td></tr>
  58. <tr><td>Vermont</td></tr>
  59. <tr><td>Virginia</td></tr>
  60. <tr><td>Washington</td></tr>
  61. <tr><td>West Virginia</td></tr>
  62. <tr><td>Wisconsin</td></tr></td></tr>
  63. <tr><td>Wyoming</td></tr>
  64. </table>
  65. </div>
  66. </div>
  67.