絞り込み検索をボタンを押して実行したいです

Question

前提・実現したいこと

記事の一覧ページを作っていて、チェックボックスやラジオボタンを選択することで
記事を絞り込めるようにしたいです。
また、チェックを入れた瞬間にではなく検索ボタンを押した時に絞り込みが実行されるようにしたいです。

発生している問題・エラーメッセージ

一応絞り込みができるようになったのですがチェックボックスやラジオボタンを押した瞬間に絞り込まれてしまいます

該当のソースコード

<form action="./" method="get" enctype="multipart/form-data">
					<div class="filter" id="js_filter">
　　　　　　　　　　　　　　<dl>
						<dt>家族構成</dt>
						<dd class="family">
						  <ul class="list-check clearfix filter-cond">
							<li>
							  <input type="checkbox" name="cat[fa][]" value="fa1" id="family01" >
							  <label for="family01" class="checkbox">子育て</label>
							  </li>
							<li>
							  <input type="checkbox" name="cat[fa][]" value="fa2" id="family02" >
							  <label for="family02" class="checkbox">2世帯</label>
							  </li>
							<li>
							  <input type="checkbox" name="cat[fa][]" value="fa3" id="family03" >
							  <label for="family03" class="checkbox">夫婦のみ</label>
							  </li>
							<li>
							  <input type="checkbox" name="cat[fa][]" value="fa4" id="family04" >
							  <label for="family04" class="checkbox">ペット</label>
							  </li>
							<li>
							  <input type="checkbox" name="cat[fa][]" value="fa5" id="family05" >
							  <label for="family05" class="checkbox">その他</label>
							  </li>
							</ul>
						  </dd>
						</dl>

					  <dl>
						<dt>延床面積</dt>
						<dd class="size">
						  <ul class="list-check clearfix filter-cond">
							<li>
							  <input type="radio" name="cat[tfa][]" value="tfa1" id="space01" >
							  <label for="space01" class="radio">〜30坪</label>
							  </li>
							<li>
							  <input type="radio" name="cat[tfa][]" value="tfa2" id="space02" >
							  <label for="space02" class="radio">30〜40坪</label>
							  </li>
							<li>
							  <input type="radio" name="cat[tfa][]" value="tfa3" id="space03" >
							  <label for="space03" class="radio">40〜50坪</label>
							  </li>
							<li>
							  <input type="radio" name="cat[tfa][]" value="tfa4" id="space04" >
							  <label for="space04" class="radio">50坪〜</label>
							  </li>
							</ul>
						  </dd>
						</dl>
                        <dl>
                          <dt>カラー</dt>
                          <dd class="color">
                            <ul class="list-check clearfix filter-cond">
                              <li>
                                <input type="radio" name="cat[co][]" value="co1" id="color01" >
                                <label for="color01" class="radio">クリア</label>
                                </li>
                              <li>
                                <input type="radio" name="cat[co][]" value="co2" id="color02" >
                                <label for="color02" class="radio">ナチュラル</label>
                                </li>
                              <li>
                                <input type="radio" name="cat[co][]" value="co3" id="color03" >
                                <label for="color03" class="radio">ホワイト</label>
                                </li>
                              <li>
                                <input type="radio" name="cat[co][]" value="co4" id="color04" >
                                <label for="color04" class="radio">ミディアム</label>
                                </li>
                              <li>
                                <input type="radio" name="cat[co][]" value="co5" id="color05" >
                                <label for="color05" class="radio">エボニー</label>
                                </li>
                              <li>
                                <input type="radio" name="cat[co][]" value="co6" id="color06" >
                                <label for="color06" class="radio">ダーク</label>
                                </li>
                              <br>
                              <li>
                                <input type="radio" name="cat[co][]" value="co7" id="color07" >
                                <label for="color07" class="radio">ブラック</label>
                                </li>
                              <li>
                                <input type="radio" name="cat[co][]" value="co8" id="color08" >
                                <label for="color08" class="radio">チェリー</label>
                                </li>
                              <li>
                                <input type="radio" name="cat[co][]" value="co9" id="color09" >
                                <label for="color09" class="radio">オリジナル</label>
                                </li>
                              
                              </ul>
                            </dd>
                          </dl>
                      </div>
					</div>
			 <button id="filterBtn">上記の条件で検索する</button>
				</form>

<section class="works_list">
    <div class="contentWrap">
		
        <ul class="filter-items">
               
                      <li data-filter-key="fa3 fa4 tha3 th1 th2 th3 th4 th5 th6 ta5 ho5 co5">
              <a href="#">
                <div class="imgBox"><figure><img src=""></figure></div>
                <div class="cont">
                    <h3>の家</h3>
                    <p>夫婦のみ | ペット | 2階 | 40〜50坪 | 吹抜け | ロフト | リビング | インテリア | 収納 | 家事動線 | 融合 | スポーツ | エボニー</p>
                </div>
              </a>
            </li>
                      <li data-filter-key="fa1 tfa3 th1 th2 th3 th4 th5 th6 ta5 co6">
              <a href="#">
                <div class="imgBox"><figure><img src=""></figure></div>
                <div class="cont">
                    <h3>の家</h3>
                    <p>子育て | 2階 | 40〜50坪 | 吹抜け | ロフト | リビング | インテリア | 収納 | 家事動線 | 融合 | ダーク</p>
                </div>
              </a>
            </li>
                      <li data-filter-key="tfa3 th1 th3 th4 th5 th6 ta5 co4">
              <a href="#">
                <div class="imgBox"><figure><img src=""></figure></div>
                <div class="cont">
                    <h3>の家</h3>
                    <p>2階 | 40〜50坪 | 吹抜け | リビング | インテリア | 収納 | 家事動線 | 融合 | ミディアム</p>
                </div>
              </a>
            </li>
                     
                      <li data-filter-key="fa1 tfa2 th1 th2 th3 th4 th5 th6 ta1 co7">
              <a href="#">
                <div class="imgBox"><figure><img src=""></figure></div>
                <div class="cont">
                    <h3>の家</h3>
                    <p>子育て | 2階 | 30〜40坪 | 吹抜け | ロフト | リビング | インテリア | 収納 | 家事動線 | 和 | ブラック</p>
                </div>
              </a>
            </li>
          
        </ul>
    </div>
</section>

.is-hide {
    	display: none;
	}

var searchBox = '.search-box';
	var listItem = '.list_item';
	var hideClass = 'is-hide';
	var filterBtn = document.getElementById('filterBtn');

	$(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);
			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);
				}
			}
		}
	}

	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;
	}

	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;
	}
		
		filterBtn.addEventListener('click', filter);

試したこと

onclick()で囲えばできるかと思いましたができませんでした。
上記のように変更したら反応しなくなってしまいました。
一つの記事に複数の検索条件を指定する方法もありましたら教えていただけますと幸いです。

Answer 1

サーバー側のプログラムで絞り込みをしないと、最初から膨大の量のデータを
HTML上に保持することになるので非現実的です

Comments

[spraut]

回答ありがとうございます
記事の内容をデータベース等で管理して必要に応じて表示したほうがいいということでしょうか？

[yambejp]

例がカラーしかないのでこちらとしては判断できませんが
膨大なデータから絞り込んだデータを表示したいのではないのでしょうか？

基本的には
・DBでデータ管理し絞り込み
・ページ内表示数を決め、ページネーションもしくは無限スクロール

[spraut]

検索のカテゴリとしてはテーマや趣味など６種類ほどあります
ラジオボタンで一つしか選択できないカテゴリや、チェックボックスを使って複数選択できるカテゴリも作りたい感じです
今は記事の件数が少ないのもありHTMLに記事を直接書いて表示・非表示をしようとしています

将来のことも考えるとDBを利用したほうがいいんですね
ご丁寧にありがとうございます

[yambejp]

とりあえず全件表示の方針ですね。
カテゴリ同士はand検索のチェックボックスですか？
例えば「赤い」「りんご」を選んで、
「赤いリンゴ」の表示したいか、「赤い」または「りんご」を
表示させたいか仕様を決める必要があります。

[spraut]

カテゴリ同士はand検索をしたいと思っています

ちなみにカテゴリ同士はand検索、同一カテゴリ内ではor検索
のようにすることもできるのでしょうか？(今回その予定はございませんが…)

[yambejp]

そういうUIを作れば、絞り込みの機能自体は
さほど複雑では無いと思います

[spraut]

UI次第でできるんですね。ありがとうございます。今度調べてみます

DBは置いておいて上記のようにHTMLで絞り込みを行おうとして
動かない理由はわかりますか…？

[yambejp]

サンプルつくってみました

https://codepen.io/yambejp/pen/KKzNqXb

[spraut]

まさに理想の動きです！ありがとうございます！

ソースコードを付け足したのですが、yambejpさんのサンプルにどのように入れたら
複数カテゴリの絞り込みができますでしょうか…？
また、ラジオボタンとチェックボックスで記述に違いはございますか？

[yambejp]

codepen更新しました。

flgを順に配列にいれて、falseがないことをチェックすることにしました

[spraut]

本当にありがとうございます。おかげさまでやりたかった動きが実装できました！

チェックボックスの項目をquerySelectorAll、ラジオボタンの項目をquerySelectorで宣言して
if文を追加したら絞り込まれる項目を増やすことができる、という認識で合っていますか？
その場合、宣言する順番はソースコードに記述した順番でなければならないのでしょうか？

コメントを送信したつもりで送信できていませんでした。ご丁寧に回答頂いたのに返信が遅くなってしまい申し訳ございません

[yambejp]

> if文を追加したら絞り込まれる項目を増やすことができる

そうですね

> 宣言する順番はソースコードに記述した順番

順番には依存しません。

・チェックボックスのときはlengthを数えて1以上であることをチェック
・ラジオボタンのときはnullでないことをチェックする

[spraut]

ありがとうございます！無事に項目を増やすこともできました！

拙い質問にこんなに丁寧にわかりやすく答えてくださりありがとうございました
チェックボックスとラジオボタンの入力されているかの確認の条件もとてもわかりやすく勉強になりました
こちらで教えて頂いたコードを参考にしつつ、DBを利用した検索についても調べてみようと思います
本当にありがとうございました