JavaScript - 过滤器和搜索

Question

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

我创建了一个代码，允许通过单击按钮关联和取消关联过滤器（NEW、IN PROGRESS、ENDED、REFUSED）。效果很好。

不过，我还有一个与“onkeyup function ()”关联的“input”类型搜索字段，它允许我动态搜索表格。

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

你能帮帮我吗？

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

视觉：

我想我必须扮演这个函数managmentState()的角色但我不知道该怎么做。

谢谢！

Answer 1

您可以使用此功能仅过滤表中的可见行。

var isVisible = function (el) {
  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
}

---

例如：

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

Answer 2

由于这是在 Javascript 中，你可以使用你可以使用过滤器

function is_in_filter(text, filters) {
   return filters.exists(filter => txtValue.toUpperCase().indexOf(filter) > -1);
}

function is_in_search(text, subtext) {
   return txtValue.toUpperCase().indexOf(subtext) > -1;
}

for (i = 0; i < tr.length; i++) {
    tr[i].getElementsByTagName("td")[6];
    if (td) {
        txtValue = td.textContent || td.innerText;
        if (is_in_filter(txtValue) || is_in_search(txtValue) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

希望对您有所帮助。如有不准确之处，敬请见谅。