Question

因此，在我的网站上，我有一个侧面导航菜单，并且使用<br>来拆分各个部分，但问题是当您开始搜索时，中断链接会随着您的搜索结果一直向下推搜索，而我需要帮助以找出一种仅在菜单中搜索内容时将其删除的方法。

        <input type="text" id="navbar-search" placeholder="Search Menu" onkeyup="filterFunction()" autocomplete="on" autofocus>

        <ul id="sidenavList">
            <li><a class="not-allowed" disabled>Section Title</a></li>
            <li><a href="#">Agnes</a></li>
            <li><a href="#">Anthony</a></li>
            <li><a href="#">Amira</a></li>

            <br>    <!-- I want these <br> to remove during search inquiry -->

            <li><a class="not-allowed" disabled>Section Title</a></li>
            <li><a href="#">Bob</a></li>
            <li><a href="#">Brock</a></li>
            <li><a href="#">Bryan</a></li>

            <br>    <!-- I want these <br> to remove during search inquiry -->

            <li><a class="not-allowed" disabled>Section Title</a></li>
            <li><a href="#">Christina</a></li>
            <li><a href="#">Callie</a></li>
            <li><a href="#">Cindy</a></li>
        </ul>

        <script>
            function filterFunction() {
                var input, filter, ul, li, a, i, txtValue;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                ul = document.getElementById("sidenavList");
                li = ul.getElementsByTagName("li");
                for (i = 0; i < li.length; i++) {
                    a = li[i].getElementsByTagName("a")[0];
                    txtValue = a.textContent || a.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        li[i].style.display = "";
                    } else {
                        li[i].style.display = "none";
                    }
                }
            }
        </script>

Answer 1

我正在将jQuery添加到您的代码中，并使用<div>而不是<br>。

function filterFunction() {
  val = $('#navbar-search').val().toLowerCase();

  $('#sidenavList li').filter(function(){
    $(this).toggle($(this).text().toLowerCase().indexOf(val) > -1)
  })
                
  if (val != '') {
    $('.not-allowed').parent().hide()
    $('.divider').hide()
  } else {
    $('.not-allowed').parent().show()
    $('.divider').show()
  }
}

.divider {
  opacity: 0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="navbar-search" placeholder="Search Menu" onkeyup="filterFunction()" autocomplete="on" autofocus>

<ul id="sidenavList">
  <li><a class="not-allowed" disabled>Section Title</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Anthony</a></li>
  <li><a href="#">Amira</a></li>

  <div class="divider">Here is the line break</div>

  <li><a class="not-allowed" disabled>Section Title</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Brock</a></li>
  <li><a href="#">Bryan</a></li>

  <div class="divider">Here is the line break</div>

  <li><a class="not-allowed" disabled>Section Title</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Callie</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

我希望这是您想要的。

在Sidenav搜索菜单中的用户搜索期间删除中断链接

1 个答案: