如何使用搜索欄過濾我的bootstrap 4導航欄鏈接？

Question

我正在使用Bootstrap 4過渡我的舊網站，所以這絕對是一個學習的過程。

我的網站布局工作正常，但我意識到我的左側垂直導航欄有很多鏈接。 其中許多分組在倒塌的巢穴中。

我認為在我的導航欄頂部添加一個搜索欄會很好，這樣我就可以根據在搜索欄中輸入的部分字符串來過濾鏈接。 這適用於未隱藏在隱藏div（或class=collapsed boostrap 4 ul）內的鏈接。

我很感謝協助修改我的代碼以顯示過濾結果，其中包含隱藏在折疊ul中的任何鏈接？

這是一個小提琴

 $('.search-filter').on('keyup', function() { var input = $('.search-filter').val(); var filter = input.toLowerCase(); if (filter.length == 0) { // show all if filter is empty $('a').each(function() { $(this).show(); // show links }); return; } else { $('a').removeClass('collapsed'); $('a').each(function() { $(this).hide(); // hide all links once search is begun }); $('a:contains("' + filter + '")').each(function() { $(this).removeClass('collapsed'); // remove bootstrap 4 collapsed class designation $(this).show(); // show only matched links to search string? }); } }); 

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'); .navbar-nav.sidebar-nav { position: absolute; left: 0; top: 0; margin-top: 56px; padding-bottom: 56px; height: 100vh; background: #292b2c; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: auto; } .navbar-brand { display: inline-block; padding-top: .25rem; padding-bottom: .25rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; color: #fff; } .navbar-nav .nav-link { color: rgba(255, 255, 255, .5); } 

 <div id="link-content"> <ul class="sidebar-nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#"><i class="fa fa-fw fa-home"></i> Home</a> </li> <li class="nav-item"> <label for="nav-search" class="col-2 col-form-label sr-only">Search links</label> <div class="col p-2"> <input class="form-control form-control-sm search-filter" type="search" id="nav-search" placeholder="Search for tools"> </div> </li> <li class="nav-item"> <span class="navbar-brand">Popular tools</span> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-calculator"></i> Calculator</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-battery-3"></i> Battery </a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-database"></i> Pancake Batter</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-clock-o"></i> Marzipan</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-tags"></i> Cakes and Muffins</a> </li> <li class="nav-item"> <span class="navbar-brand">Categories</span> </li> <li class="nav-item"> <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents"><i class="fa fa-fw fa-flask"></i> Cars</a> <ul class="sidebar-second-level collapse" id="collapseComponents"> <li> <a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2">American</a> <ul class="sidebar-third-level collapse" id="collapseMulti2"> <li> <a href="#">Ford</a> </li> <li> <a href="#">GMC</a> </li> </ul> </li> <li> <a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti3">European</a> <ul class="sidebar-third-level collapse" id="collapseMulti3"> <li> <a href="#">BMW</a> </li> <li> <a href="#">Audi</a> </li> </ul> </li> </ul> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 

Answer 1

好吧，我想我已經自己想出來了（這個帖子對一個不區分大小寫的過濾器有一點幫助）。

1）我通過將它們包裝在div with id #link-content的div with id #link-content更新鏈接，以將我的過濾器與主頁和搜索輸入分開。

2）我添加了上面引用的不區分大小寫的方法

我的HTML：

   <ul class="sidebar-nav navbar-nav">
      <li class="nav-item active">
         <a class="nav-link" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
      </li>
      <li class="nav-item">
         <label for="nav-search" class="col-2 col-form-label sr-only">Search links</label>
         <div class="col p-2">
            <input class="form-control form-control-sm search-filter" type="search" id="nav-search" placeholder="Search for tools">
         </div>
      </li>
 <div id="link-content"><!-- added this to wrap the links-->     
      <li class="nav-item">
         <span class="navbar-brand">Popular tools</span>
      </li>
      <li class="nav-item filter">
         <a class="nav-link" href="#"><i class="fa fa-fw fa-calculator"></i> Calculator</a>
      </li>
      <li class="nav-item  filter">
         <a class="nav-link" href="#"><i class="fa fa-fw fa-battery-3"></i> Battery </a>
      </li>
      <li class="nav-item  filter">
         <a class="nav-link" href="#"><i class="fa fa-fw fa-database"></i> Pancake Batter</a>
      </li>

      <li class="nav-item  filter">
         <a class="nav-link" href="#"><i class="fa fa-fw fa-clock-o"></i> Marzipan</a>
      </li>
      <li class="nav-item  filter">
         <a class="nav-link" href="#"><i class="fa fa-fw fa-tags"></i> Cakes and Muffins</a>
      </li>
      <li class="nav-item  filter">
         <span class="navbar-brand">Categories</span>
      </li>
      <li class="nav-item ">
         <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents"><i class="fa fa-fw fa-flask"></i> Cars</a>
         <ul class="sidebar-second-level collapse" id="collapseComponents">
            <li>
               <a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2">American</a>
               <ul class="sidebar-third-level collapse" id="collapseMulti2">
                  <li>
                     <a href="#">Ford</a>
                  </li>
                  <li>
                     <a href="#">GMC</a>
                  </li>
               </ul>
            </li>
            <li>
               <a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti3">European</a>
               <ul class="sidebar-third-level collapse" id="collapseMulti3">
                  <li>
                     <a href="#">BMW</a>
                  </li>
                  <li>
                     <a href="#">Audi</a>
                  </li>
               </ul>
            </li>
         </ul>
      </li>
      </div>
   </ul>

我的更新代碼：

// Case insensitive method for filter
jQuery.expr[':'].casecontains = (a, b, c) => jQuery(a).text().toUpperCase().indexOf(c[3].toUpperCase()) >= 0;

$('.search-filter').on('keyup', function () {
            var input = $('.search-filter').val();
                        console.log('input: '+input);
            if (input.length != 0) { 
            // first hide the div #link-content lists from view
            $('#link-content li').hide();
            // but secretly unhide the collapsed links
            // using .show, so the nested uls can be viewed
            $('#link-content li.nav-item ul').show();
            // then filter in the matching links only
            $('#link-content li:casecontains("'+input+'")').show();
            } else {
            // secretly unhide the collapsed links
            $('#link-content li.nav-item ul').hide();  
            // if search is empty, show the div and reset columns
            $('#link-content li').show();
            }
        });

這是一個工作示例的小提琴 ，打開任何隱藏的鏈接（boostrap 4中的折疊類）。

Answer 2

我使用的方法是記住哪些項匹配，然后使用該列表取消隱藏父項。

更新的小提琴： https ： //jsfiddle.net/j2gpann3/1/

這種方法的優點是隱藏的子菜單項（如“寶馬”等）現在將顯示在搜索中，並且與其他隱藏項目之間不會有巨大的間隙。 正則表達式搜索搜索每個單詞的出現，因此即使它們與菜單項文本無序，它仍將匹配。

$('.search-filter').on('keyup', function() {
  var matches = [];
  var input = $.trim($('.search-filter').val());
  var val = '^(?=.*\\b' + input.split(/\s+/).join('\\b)(?=.*\\b') + ').*$'; // using individual word matching filter from http://stackoverflow.com/a/9127872/1544886
  var filter = RegExp(val, 'i');

  if (input.length === 0) { // show all if filter is empty

    $('.collapse').removeClass('show').addClass('collapsed'); // hide collapsable items fast.
    $('.hide').removeClass('hide'); // remove any hidden elements from previous searches
  } else {
    $('.collapse').addClass('show'); // show all collapsed items

    $('ul.sidebar-nav a:not(".home")').filter(function() { // skip home <li> so it shows permanently
        $this = $(this);

        // test for a match to search string
        text = $this.text().replace(/\s+/g, ' ');
        var isMatch = filter.test(text);

                // store match so we can unhide parents of this item 
        if (isMatch) matches.push($this);

        return !isMatch;
    }).parent().addClass('hide'); // this hides any <li> that doesn't match search terms. Hiding <a> results in large gaps in the output

    $.each(matches, function() { // unhide parents of our matches
        this.parentsUntil(".sidebar-nav", ".hide").removeClass('hide');
    });
  }
});

該演示需要在Home鏈接中添加一個home類，以防止它被搜索隱藏：

<a class="nav-link home" href="#"><i class="fa fa-fw fa-home"></i> Home</a>

並添加了一個用於hide的CSS類：

.hide {
  display: none;
}

Answer 3

如果你刪除：

toLowerCase();

如果您完美打字，一切都完美匹配。 問題是您將搜索字詞設為小寫，但它與小寫字詞不匹配。 因此，當您鍵入計算器時，它不匹配，因為實際導航項顯示為計算器，具有大寫c。

因此，您也可以通過HTML或JavaScript將導航項設置為小寫，或者以不同的方式進行操作，即使用ID，但如果網站是動態的，則會導致問題。

一個奇怪的工作可能是大寫每個單詞的第一個字母，所以它實際上匹配HTML。 看看如何將每個單詞的首字母大寫，就像一個雙字城市一樣？