时间戳

首页 > 解决方案 > 在 sidenav 搜索菜单中的用户搜索期间删除中断链接

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

问题描述

所以在我的网站上，我有一个侧边导航菜单，可以分解我使用的部分<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>

标签： javascripthtmlcss

解决方案

我将 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>

我希望这就是你要找的。

推荐阅读