バニラなJavaScriptで複数項目対応の絞り込み検索スクリプトを書いてみた

こちらが完成見本

See the Pen Vanilla JavaScript Multi Filter by Gurunpa (@gurunpa) on CodePen.

仕組みとしては、対象外のアイテムに「d-none」というクラスを追加して非表示にしています。このクラス名は自由に変えられます。

既存のソースコードに組み込むときの注意点

• 絞り込み選択selectタグのname=”ABC”：絞り込み対象data-ABC
• 絞り込み選択optionタグのvalue=”XYZ”：絞り込み対象data-ABC=”XYZ”
• 全表示用のvalue値はallで統一する

例）地域で絞り込みたいとき

<select class="js-filter" name="area">
  <option value="all">全ての地域</option>
  <option value="東京">東京</option>
</select>

<div class="js-filter-item" data-area="東京">...</div>

関数呼び出しの最初の引数は「.」不要です。

multi_filter('d-none', '.js-filter-item', '.js-filter', '.js-filter-msg');

Bootstrapをお使いの方は上記HTML・JavaScriptのコードを丸っとコピーするだけでOKです。そんなものは使っていないという方は以下のCSSを追記してください。

CSS

.d-none {
  display: none;
}

最後に

一応実案件でも使っていますが、幸いまだ不具合は出ておりません。とはいえ、もっとスマートな書き方がある気もしています。あくまで一例としてご参考いただければこれ幸いです(=ﾟωﾟ)b