複数項目対応の絞り込み検索機能【JavaScript】

さっそく完成見本

See the Pen JavaScript｜複数項目対応の絞り込み機能 by Gurunpa (@gurunpa) on CodePen.

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

既存のコードに組み込む場合の注意点

• selectのname属性値と検索対象のdata-〇〇を合わせる
• optionのvalue値と検索対象のdata属性値を合わせる
• 全表示の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・CSS・JavaScriptの各コードを丸っとコピーするだけでOKです。そんなものは使っていないという方は以下をご覧ください。

Boostrapなしの最小構成版

記号の部分をお好きな文字に打ち換えてください。

HTML

<!------ 絞り込み部分 ------>
<select class="js-filter" name="★">
  <option value="all">全て</option>
  <option value="■">■</option>
  <option value="●">●</option>
  <option value="▲">▲</option>
  ・
  ・
</select>
<select class="js-filter" name="☆">
  <option value="all">全て</option>
  <option value="□">□</option>
  <option value="○">○</option>
  <option value="▽">▽</option>
  ・
  ・
</select>

<!------ 検索結果メッセージ （不要の場合は消してOK）------>
<p>検索結果：<span class="js-filter-msg"></span></p>

<!------ 絞り込み対象 ------>
<div class="js-filter-item" data-★="■" data-☆="□">対象01</div>
<div class="js-filter-item" data-★="●" data-☆="○">対象02</div>
<div class="js-filter-item" data-★="▲" data-☆="▽">対象03</div>
・
・

CSS

.d-none {
  display: none;
}

JS

//～処理部分は省略～
multi_filter('d-none', '.js-filter-item', '.js-filter', '.js-filter-msg');

おしまい。