带有嵌套列表/子级的搜索过滤器-jQuery JavaScript

时间:2018-12-12 22:11:04

标签: javascript jquery

我有一个复选框树结构,可以用来进行选择-但我也希望能够过滤显示的内容。如果您在搜索框中输入内容,则不匹配的内容将被隐藏。但是,这不适用于嵌套列表中的项目。他们只是被忽略。我一辈子都无法弄清楚为什么他们没有表现出来。我尝试了多个选择器和父/子变体,但没有任何效果。

这是我的jsfiddle显示我目前拥有的东西: fiddle

以下是处理搜索过滤器的部分代码:

    function searchFunction() {

      var input, filter, ul, li, div, i, heading;

      input = document.getElementById("input-search");

      filter = input.value.toUpperCase();

      ul = document.getElementById("treeview");

      li = $('#treeview .list-group-wrapper li');

      for (i = 0; i < li.length; i++) {
        div = li[i].getElementsByClassName("custom-control-label")[0];
        if (div.innerHTML.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }

    }

我在做什么错了?

1 个答案:

答案 0 :(得分:0)

我为此提出了另一种更简单的方法...

  function searchFunction(elm, list) {
    var input = $("#input-search");

    $(input).keyup(function() {
      var searchTerms = $(this).val();

      $('li').each(function() {

        var hasMatch = searchTerms.length == 0 ||
          $(this).text().toLowerCase().indexOf(searchTerms.toLowerCase()) > 0;
            $(this).toggle(hasMatch);

      });
    });
  }