Webサイトの商品一覧や情報検索では、最初に大きなカテゴリで絞り込み、その結果の中からさらに条件を追加して検索したいケースがあります。例えば「貝類」を選択した後に「高級」という条件を追加し、対象をさらに限定するといった段階的な絞り込みです。
このような機能はCSSだけでは実現できず、JavaScriptで現在選択されている条件を保持しながら、複数条件に一致するデータだけを表示する仕組みを作る必要があります。
CSSだけでは複数段階の絞り込み検索はできない
まず理解しておきたいのは、CSSは表示デザインを制御するための技術であり、データの条件判定や検索処理を行うことはできないという点です。
例えば「貝類」というカテゴリを選んだ後、その中から「高級」という条件でさらに絞り込む場合、現在表示されているデータを確認し、条件に一致するものだけを残す処理が必要になります。この判断処理はJavaScriptの役割になります。
HTMLにclassやdata属性を設定し、JavaScriptで条件を読み取ることで、複数条件による絞り込み検索を実装できます。
複数条件検索ではAND条件を使う
質問のような「一度絞り込んだ結果からさらに絞り込む」動作は、AND検索という考え方になります。
例えば以下のようなデータがある場合を考えます。
| 商品 | 分類 | 特徴 |
|---|---|---|
| つぶ貝 | 貝類 | 一般 |
| バイ貝 | 貝類 | 一般 |
| サザエ | 貝類 | 高級 |
ここで「貝類」と「高級」の2つを選択した場合、条件は「貝類であること」かつ「高級であること」となります。そのため、サザエだけが表示される仕組みになります。
JavaScriptで複数条件の絞り込みを作る基本的な考え方
実装方法としては、各項目に検索対象となる情報を持たせ、チェックボックスの状態に応じて表示・非表示を切り替えます。
例えばHTML側で以下のようにデータ属性を設定します。
<div class=”item” data-category=”貝類” data-type=”高級”>サザエ</div>
JavaScriptでは、選択されている条件を取得し、各itemがすべての条件を満たしているか確認します。
const items = document.querySelectorAll('.item');
const checked = document.querySelectorAll('input:checked');
items.forEach(item => {
let show = true;
checked.forEach(input => {
if(item.dataset[input.name] !== input.value){
show = false;
}
});
item.style.display = show ? '' : 'none';
});このように条件を一つずつ確認し、すべて一致したものだけを表示すれば、段階的な絞り込み検索になります。
現在の検索結果に対して再検索する仕組み
「一度絞り込んだ結果だけを対象にする」という場合でも、実際にはすべてのデータを毎回確認する方法がおすすめです。
例えば最初に「貝類」を選択したあと、画面上には3件しか表示されていなくても、内部では全データを保持しておきます。そして「貝類」と「高級」の両方の条件を満たすものだけを表示します。
この方法のメリットは、条件を外した場合にも正しく元の一覧へ戻せることです。現在表示されているものだけを対象にすると、条件解除時に表示できなくなるデータが発生することがあります。
複数チェック可能な検索でよくある間違い
複数チェックボックスによる検索では、OR条件になってしまうケースがあります。
例えば「貝類」と「高級」を選択した場合に、「貝類または高級」という条件になると、つぶ貝・バイ貝・サザエだけでなく、別カテゴリの高級商品まで表示されてしまいます。
今回必要なのはOR検索ではなくAND検索です。そのため、JavaScript側で「選択されたすべての条件に一致するか」を判定する必要があります。
既存テンプレートを修正する場合のポイント
HTMLを少し編集できる程度の場合は、まず各検索対象の要素に分類情報を追加する方法がおすすめです。
例えば以下のような情報をdata属性として持たせます。
- カテゴリ
- 種類
- 価格帯
- 特徴
その上でJavaScript部分だけを追加すれば、既存のテンプレートを大きく変更せずに絞り込み機能を拡張できます。
WordPressなどのCMSを利用している場合でも、HTMLにclassやdata属性を追加し、JavaScriptを読み込ませることで同じ仕組みを作ることができます。
まとめ
絞り込み検索で「一度検索した結果からさらに条件を追加する」機能を作るには、CSSではなくJavaScriptによる条件判定が必要です。
実装のポイントは、OR検索ではなくAND検索にすること、そして現在表示されている結果だけではなく元データ全体から毎回条件判定することです。
カテゴリや特徴などの情報をHTMLに持たせ、JavaScriptで複数条件をチェックすれば、商品検索サイトのような高度な絞り込み機能をテンプレートへ追加できます。
コメント