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

この記事はアフィリエイト広告を利用しています。
この記事は最終更新から1年以上経過しています。内容が古くなっているかもしれません。。

この記事の対象者
・ホームページに絞り込み検索機能を入れたい
・複数の条件で絞り込めるようにしたい
・jQueryを使いたくない

さっそく完成見本

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');

おしまい。

この記事はお役に立てましたか?

はい

ブログランキング・にほんブログ村へ

コメントを残す