checkboxを使った絞り込み検索 or検索からand検索に変更

Question

実現したいこと

checkboxを使った絞り込み機能でor検索からand検索に修正する。

• and検索
• 複数の要素を持つ

前提

html、css、JavaScript（jQuery）を使用し、
複数タグを持つ要素の、or検索での絞り込み機能を実装しています。
それをand検索に変更したいです。
or検索はこちらのコードをお借りしています。
https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
[3. 配列を使ってリスト側に複数の値を設定できるようにする]

発生している問題

上記コードを解体して考えているのですが、
どこがor検索としてのコードなのか、
and検索にするにはどういったコードを埋め込めばいいのか、
一部解読できない箇所　等があり、完成させることができません。

該当のソースコード

  <form>
    <div class="search-box">
      <span class="search-box_label">Tag:</span>
      <input type="checkbox" name="tag" value="tag1">tag1
      <input type="checkbox" name="tag" value="tag2">tag2
      <input type="checkbox" name="tag" value="tag3">tag3
      <input type="checkbox" name="tag" value="tag4">tag4
      <input type="checkbox" name="tag" value="tag5">tag5
    </div>
  </form>
  <ul class="list">
    <li class="list_item" data-tag='["tag1", "tag2"]'>
      Tag: tag1,tag2
    </li>
    <li class="list_item" data-tag='["tag3", "tag4"]'>
      Tag: tag3,tag4
    </li>
    <li class="list_item" data-tag='tag5'>
      Tag: tag5
    </li>
  </ul>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

    .is-hide {
      display: none;
    }

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

    $(function () {
      // 絞り込み項目を変更した時、「search_filter」の処理を行う
      $(document).on('change', searchBox + ' input', function () {
        search_filter();
      });
    });

    /**
     * リストの絞り込みを行う
     */
    // 「search_filter」の処理
    function search_filter() {

      // 非表示状態を解除
      // .is-hideのクラスを外す
      $(listItem).removeClass(hideClass);

      // ループ処理
      // 初期値:0
      // 条件式:iが.search-boxの数以下なら
      // 増減式:+1
      for (var i = 0; i < $(searchBox).length; i++) {

        // .search-boxのi番目のinput属性の中のnameを[name]とおく
        var name = $(searchBox).eq(i).find('input').attr('name');

        // 選択されている[name]を[searchData]とおく
        var searchData = get_selected_input_items(name);

        // [searchData]の数が0、もしくは[searchData]が0番目でvalueが""の時は飛ばす
        if (searchData.length === 0 || searchData[0] === '') {

          // 残りの繰り返し処理をスキップして次へ
          continue;
        }
        // リスト内の各アイテムをチェック
        // ループ処理
        // 初期値:0
        // 条件式:jが.list_itemの数以下なら
        // 増減式:+1
        for (var j = 0; j < $(listItem).length; j++) {

          // アイテムに設定している項目を取得
          // .list_itemのj番目のxxxxx
          var itemData = get_setting_values_in_item($(listItem).eq(j), name);

          // 絞り込み対象かどうかを調べる
          // .list_itemのj番目のxxxxx　と　選択されている[name]
          var check = array_match_check(itemData, searchData);

          // もし偽なら、.list_itemのj番目に.is-hideのクラスを加える
          if (!check) {
            $(listItem).eq(j).addClass(hideClass);
          }
        }
      }
    }

    /**
     * inputで選択されている値の一覧を取得する
     * @param  {String} name 対象にするinputのname属性の値
     * @return {Array}       選択されているinputのvalue属性の値
     */
    function get_selected_input_items(name) {
      var searchData = [];
      // チェックされているnameにループ処理
      $('[name=' + name + ']:checked').each(function () {
        // 選択されているnameにvalueの値を追加
        searchData.push($(this).val());
      });
      return searchData;
    }

    /**
     * リスト内のアイテムに設定している値の一覧を取得する
     * @param  {Object} target 対象にするアイテムのjQueryオブジェクト
     * @param  {String} data   対象にするアイテムのdata属性の名前
     * @return {Array}         対象にするアイテムのdata属性の値
     */
    function get_setting_values_in_item(target, data) {
      // ターゲットのデータ属性を[itemData]とおく
      var itemData = target.data(data);
      // [itemData]が配列かどうかチェックして偽なら
      if (!Array.isArray(itemData)) {
        // 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;

      // ループ処理
      // 初期値:0
      // 条件式:iが配列1の数以下なら
      // 増減式:+1
      for (var i = 0; i < arr1.length; i++) {
        // 配列2に配列1のiが含まれていたら
        if (arr2.indexOf(arr1[i]) >= 0) {
          arrCheck = true;
          break;
        }
      }
      return arrCheck;
    }

社内で聞ける人もおらず、初歩的な質問なのも承知しております。
調べてもわからずでお力お借りできれば幸いです。
よろしくお願いいたします。

Answer 1

tag5を指定している箇所のようにdata-tagが配列とプリミティブが混ざっていると判定が煩雑になります
今回のケースだと値がひとつしかなくても配列風に書くべきでしょう

また想定するAND検索とはなにかによります。data-tagの全ての要素がname=tagでチェックされているならという命題であれば以下の通り

<style>
.is-hide {display: none;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.list_item').forEach(x=>x.classList.add('is-hide'));
});
document.addEventListener('change', ()=>{
  const tags=[...document.querySelectorAll('[name="tag"]:checked')].map(x=>x.value);
  document.querySelectorAll('.list_item[data-tag]').forEach(x=>{
    let tag;
    try{
      tag=JSON.parse(x.dataset.tag);
    }catch(e){
      tag=[x.dataset.tag];
    }
    x.classList.toggle('is-hide',!tag.every(x=>tags.includes(x)));
  });
});
</script>
<form>
    <div class="search-box">
      <span class="search-box_label">Tag:</span>
      <label><input type="checkbox" name="tag" value="tag1">tag1</label>
      <label><input type="checkbox" name="tag" value="tag2">tag2</label>
      <label><input type="checkbox" name="tag" value="tag3">tag3</label>
      <label><input type="checkbox" name="tag" value="tag4">tag4</label>
      <label><input type="checkbox" name="tag" value="tag5">tag5</label>
    </div>
  </form>
  <ul class="list">
    <li class="list_item" data-tag='["tag1"]'>
      Tag: tag1
    </li>
    <li class="list_item" data-tag='["tag1", "tag2"]'>
      Tag: tag1,tag2
    </li>
    <li class="list_item" data-tag='["tag1","tag3"]'>
      Tag: tag1,tag3
    </li>
    <li class="list_item" data-tag='["tag3", "tag4"]'>
      Tag: tag3,tag4
    </li>
    <li class="list_item" data-tag='tag5'>
      Tag: tag5
    </li>
  </ul>

Comments

[hrnkmhmdmyk]

早々にご回答いただきありがとうございます！
想定するAND検索は、
例えばtag1、2にチェックを入れたら、
tag1と2、両方を持つものだけに絞り込まれる　です。

ご教示いただきましたコード、読み解いて実装していこうと思います。
ありがとうございます！