【javascript】検索結果の絞り込みを実装した

こんにちは

Webサイトにおいて、以下のような検索結果の動的な絞り込みをjavascriptで実装したメモです。

$(function() {
    // .changeでチェックボックス監視
    $('input[name="filter[]"]').change(function() {

        // 選択されたチェックボックスのvalue格納用配列fiterを用意
        var filter = [];
        // checkedとなっているチェックボックスのvalueをfilterに格納
        $('input[name="filter[]"]:checked').each(function() {
            filter.push($(this).val());                                   
        });

        $('[絞り込み対象の要素群を指定]').each(function(index, element) {
            var channel_name = $(this).find('[フィルタ対象の文字列が含まれている要素を指定]').text();
            //filterに含まれていなければ非表示 filterが空なら全部表示
            if (filter.length == 0 || filter.includes(channel_name)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});

ポイントは.changeでチェックボックスの状態を常に監視している点でしょうか。
あとはフィルタ対象の要素群を取得できれば.showと.hideで実現できますね。

ちなみに以下の私が運営しているサイトで実際に動作を確認できます。
www.vtasmr.com

サーバーにはさくらレンタルサーバーを使用しています。
高速・安定・無料SSL付！月額524円でWordPressが使えるさくらのレンタルサーバ