複数条件で要素をリアルタイムに絞り込み：jQuery

2023-08-07 JavaScript

最終更新日：2023-08-09

jQueryで、HTMLのdata属性に指定した値で要素を絞り込む方法をご紹介します。

1 jQueryの記述
2 HTML・CSSの準備

jQueryの記述


var searchBox = ".filter dd"; // 絞り込む項目を選択するエリア
var listItem = ".sitem"; // 絞り込み対象のアイテム
var hideClass = "is-hide"; // 絞り込み対象外の場合に付与されるclass名

$(function () {
  // 絞り込み項目を変更した時
  $(document).on("change", searchBox + " input", function () {
    search_filter();
  });
});

/*
絞り込みを行う
*/
function search_filter() {
  // 非表示状態を解除
  $(listItem).removeClass(hideClass);
  for (var i = 0; i < $(searchBox).length; i++) {
    var name = $(searchBox).eq(i).find("input").attr("name");
    // 選択されている項目を取得
    var searchData = get_selected_input_items(name);
    // 選択されている項目がない、またはALLを選択している場合は飛ばす
    if (searchData.length === 0 || searchData[0] === "") {
      continue;
    }
    // リスト内の各アイテムをチェック
    for (var j = 0; j < $(listItem).length; j++) {
      // アイテムに設定している項目を取得
      var itemData = get_setting_values_in_item($(listItem).eq(j), name);
      // 絞り込み対象かどうかを調べる
      var check = array_match_check(itemData, searchData);
      if (!check) {
        $(listItem).eq(j).addClass(hideClass);
      }
    }
  }
}

/*
inputで選択されている値の一覧を取得する
*/
function get_selected_input_items(name) {
  var searchData = [];
  $("[name=" + name + "]:checked").each(function () {
    searchData.push($(this).val());
  });
  return searchData;
}

/*
リスト内のアイテムに設定している値の一覧を取得
*/
function get_setting_values_in_item(target, data) {
  var itemData = target.data(data);
  if (!Array.isArray(itemData)) {
    itemData = [itemData];
  }
  return itemData;
}

/**
 * 2つの配列内で一致する文字列があるかどうかを調べる
 * @param  {Array} arr1 調べる配列1
 * @param  {Array} arr2 調べる配列2
 * @return {Boolean}    一致する値があるかどうか
 */
function array_match_check(arr1, arr2) {
  // 絞り込み対象かどうかを調べる
  var arrCheck = false;
  for (var i = 0; i < arr1.length; i++) {
    if (arr2.indexOf(arr1[i]) >= 0) {
      arrCheck = true;
      break;
    }
  }
  return arrCheck;
}

HTML・CSSの準備

<dl class="filter">
<dt>色</dt>
<dd>
<input type="radio" name="color" value="赤" id="c1"><label for="c1">赤</label>
<input type="radio" name="color" value="青" id="c2"><label for="c2">青</label>
<input type="radio" name="color" value="緑" id="c3"><label for="c3">緑</label>
<input type="radio" name="color" value="" id="c4"><label for="c4">all</label>
</dd>
<dt>サイズ</dt>
<dd>
<input type="radio" name="size" value="大" id="s1"><label for="s1">大</label>
<input type="radio" name="size" value="中" id="s2"><label for="s2">中</label>
<input type="radio" name="size" value="小" id="s3"><label for="s3">小</label>
<input type="radio" name="size" value="" id="s4"><label for="s4">all</label>
</dd>
</dl>

<h3>結果</h3>
<ul class="serchlist">
<li class="sitem" data-color='["赤","青"]' data-size="大">
赤青大
</li>
<li class="sitem" data-color='青' data-size="中">
青中
</li>
<li class="sitem" data-color='["青","緑"]' data-size="小">
青緑小
</li>
<li class="sitem" data-color='緑' data-size="大">
緑大
</li>
</ul>

ポイントは、
まず、inputのname属性でdata-○○の部分と同じ名前を指定します。

次に、結果部分にdata属性で各条件を指定します。
複数の条件を持つ場合は
data-color='[“赤”,”青”]’
のように配列で指定します。