ページ内のデータに絞込み検索を実装する方法

ページ内のデータに絞込み検索を実装する方法

先日、とあるお客様から、「ページ内に一覧表示させたデータの中から、該当するものだけを選び出せるようにしたい」というご要望をいただきました。
jQueryとフォームの組み合わせでいい感じに実装することができましたので、今後のためにまとめておきます。

実装サンプル

サンプルとして、なんちゃって個人情報さんで生成したデータ50件を用意しました。

このテーブルデータを、血液型と誕生月で絞込み表示させたものが↓です。

See the Pen 絞込み表示 by HSMT (@HSMT) on CodePen.

Web上で色々検索するとフリーワード検索で絞込みを実装するコードがいくつか見つかりましたが、プルダウンで項目を選べるようにする必要があったので、改良を加えました。

仕組みとしては、<option value=””> の値を検索文字列として、tr に含まれる td の中にその文字列が含まれていたら、そのtr を「show」、含まれていなかったらその tr を「hide」です。

文字列の検索なので、上記のサンプルでもわかるように、「B型」で検索を掛けると「AB型」も含まれてしまうのがちょっと困ったところ;
この辺はデータ側の表記を工夫してバッティングしないようにするなどの工夫が必要です。

検索フォームは、絞り込みたいデータよりも前に設置する必要があります。
サンプルは2軸で絞り込んでいますが、jsを更に入れ子にすることで、3軸以上での絞込みを実装することも可能です。
あと、例えば、trの中の3番目のtdに対して検索を掛けたい、みたいな時は、

var txt = $(this).find("td").text();

この部分を以下のように変更すればオッケー、のはず。

var txt = $(this).find("td:eq(2)").text();

特定のセルだけを対象としたい場合などにご活用ください。

この記事を書いた人

ひしもち

京都の某Web制作会社で4年弱勤務したのち、退職して個人事業主となりました。
現在の主なお仕事は、WordPressを利用したWebサイトの制作です。
業務システムのUIデザインをしていた経験もあり。

専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。