複数項目対応の絞り込み検索機能【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');
おしまい。
この記事はお役に立てましたか?
いいえ
ヤフーに戻ります