Question

搜索问题时，没有搜索结果的类别仍然可见。该代码曾经在仅使用HTML之前就可以工作，但是我们将代码更改为AJAX并以此构建HTML结构。这是发布到页面时的HTML布局：

<div class="cd-faq-items" id="items">
    <ul id="${c}" class="cd-faq-group">
          <li id="${c}" class="cd-faq-title">
              <h2>${c}</h2>
          </li>
          <li>
              <a class="cd-faq-trigger" href="${el.id}">${el.question}</a>
                  <div class="cd-faq-content">
                     <p>${el.answer}</p>
                  </div> 
          </li>
     </ul>
</div>

搜索栏html：

<form class="search-container">
         <input type="text" id="myInput" onkeyup="searchBar()">
         <a href="#"><img class="search-icon" src="img/search-icon.png" style="color: #bbbbc7"></a>
 </form>

JavaScript搜索功能：

        function searchBar() {
            // Declare variables
            var input, filter, ul, li, a, i;
            var ids = ["items"];
            var count = 0
            for (var i in ids) {
                input = document.getElementById('myInput');
                filter = input.value.toUpperCase();
                ul = document.getElementById(ids[i]);
                li = ul.getElementsByTagName('li');

                // Loop through all list items, and hide those who don't match the search query

                for (i = 0; i < li.length; i++) {
                    if (li[i].className != "cd-faq-title") {
                        a = li[i].getElementsByTagName("a")[0];
                        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            li[i].style.display = "";

                        } else {
                            li[i].style.display = "none";
                        }
                    }
                }
                for (i = 0; i < li.length; i++) {
                    if (li[i].style.display == "none") {
                        count++
                    }
                }
                if (count == (li.length - 1)) {
                    li[0].style.display = "none";
                }
                if (count < (li.length - 1)) {
                    li[0].style.display = ""
                }
                count = 0;
            }
        }

页面：

在上图中，类别“ Autorisatie”，“ EDI”，“ Overige”，“ RF”将必须隐藏。我不知道如何修复JavaScript函数，即使它可能只是简单的修复。

谢谢。

Answer 1

使用以下代码使其正常工作：

var ids = [];
$("#items").find("ul.cd-faq-group").each(function () {
    var id = $(this).attr('id');
    ids.push(id);
});

隐藏没有该类别搜索结果的标题（类别）（javascript搜索功能）

1 个答案: