tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。
tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。
Multifilter
こういうの。デモを用意しました。
尚、データはなんちゃって個人情報を利用させて頂いています。
$('.foo').multifilter() |
使い方もシンプル。上記のようにtableを指定。
<div class='filters'> <div class='filter-container'> <input autocomplete='off' class='filter' name='名前' placeholder='名前' /> </div> <div class='filter-container'> <input autocomplete='off' class='filter' name='性別' placeholder='性別' /> </div> <div class='filter-container'> <input autocomplete='off' class='filter' name='誕生日' placeholder='誕生日' /> </div> <div class='filter-container'> <input autocomplete='off' class='filter' name='キャリア' placeholder='キャリア' /> </div> <div class='clearfix'></div> </div></div><div class='container'> <table> <thead> <th>名前</th> <th>性別</th> <th>誕生日</th> <th>キャリア</th> </thead> |
input要素のname属性とtableの列名をあわせればOKです。
ライセンスはMITとの事。
