JavaScript-过滤器和搜索

Question

我有一个小项目，旨在动态过滤和搜索表中的项目。

我创建了一个代码，可以通过单击按钮来关联和取消关联过滤器（新，进行中，已终止，已拒绝）。它运行完美。

但是，我也有一个与“ onkeyup函数（）”关联的“输入”类型搜索字段，该字段使我可以动态搜索该表。

我的问题：我无法组合这两种类型的过滤器。示例：我希望当用户搜索关键字时，代码是否考虑到活动过滤器。

你能帮我吗？

下面的JavaScript代码：

    function myFunctionForSearch(){
        input_search_id = document.getElementById("suivi_for_agent").id;
        filter_global(input_search_id);
    }

    // Permet de mettre en lien les filtres et le tableau (appelle d'autres fonctions)
    function filter_global(id){
        block_filter = document.getElementById(id)
        block_filter_id = block_filter.id
        line_for_block = block_filter.lastChild; // Ligne de couleur sous le filtre selectionné

        if (block_filter_id == "suivi_for_agent"){
            input_search = document.getElementById(block_filter_id);
            filter_search = input_search.value.toUpperCase();
            managmentState();
        }
        if (block_filter_id == "block_demarche_etat"){
            if (!toggle_new){
                toggle_new = true;
                state_new = "Nouveau";
                filter_new = state_new.toUpperCase();
            }
            else {
                toggle_new = false;
                state_new = "";
                filter_new = "";
            }
            managmentState();
            styleFilterToggle(toggle_new, block_filter, line_for_block);
        }
        if (block_filter_id == "block_demarche_etat2"){
            if (!toggle_is_pending){
                toggle_is_pending = true;
                state_in_progress = "En cours";
                state_in_pending = "En attente";
                filter_is_progress = state_in_progress.toUpperCase();
                filter_is_pending = state_in_pending.toUpperCase();
            } else {
                toggle_is_pending = false;
                state_in_progress = "";
                state_in_pending = "";
                filter_is_progress = "";
                filter_is_pending = "";

            }
            managmentState();
            styleFilterToggle(toggle_is_pending, block_filter, line_for_block);
        }
        if (block_filter_id == "block_demarche_etat3"){
            if (!toggle_completed){
                toggle_completed = true;
                state_completed = "Terminé";
                filter_completed = state_completed.toUpperCase();
            } else {
                toggle_completed = false;
                state_completed = "";
                filter_completed = "";
            }
            managmentState();
            styleFilterToggle(toggle_completed, block_filter, line_for_block);
        }
        if (block_filter_id == "block_demarche_etat4"){
            if (!toggle_refused){
                toggle_refused = true;
                state_refused = "Refusé";
                filter_refused = state_refused.toUpperCase();
            } else {
                toggle_refused = false;
                state_refused = "";
                filter_refused = "";
            }
            managmentState();
            styleFilterToggle(toggle_refused, block_filter, line_for_block);
        }
    }

    // Permet de combiner les filtres
    function managmentState(){

        table = document.getElementById("order_tableau");
        tr = table.getElementsByTagName("tr");
        filter_array = [];
        if (filter_new){
            filter_array.push(filter_new);
        }
        if (filter_is_pending){
            filter_array.push(filter_is_pending);
        }
        if (filter_is_progress){
            filter_array.push(filter_is_progress);
        }
        if (filter_completed){
            filter_array.push(filter_completed);
        }
        if (filter_refused){
            filter_array.push(filter_refused);
        }

        if (filter_array == ""){
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[6];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf("") > -1){
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        } else {
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[6];
                if (td) {
                    txtValue = td.textContent || td.innerText;

                    if (txtValue.toUpperCase().indexOf(filter_array[0]) > -1 ||
                        txtValue.toUpperCase().indexOf(filter_array[1]) > -1 ||
                        txtValue.toUpperCase().indexOf(filter_array[2]) > -1 ||
                        txtValue.toUpperCase().indexOf(filter_array[3]) > -1 ||
                        txtValue.toUpperCase().indexOf(filter_array[4]) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    }

Visual：

我认为我必须充当此功能managmentState（）的角色，但我不知道该怎么做。

谢谢！