title: How can I filter my bootstrap 4 navbar links with a search bar?
body: <p>I'm transitioning my old website using Bootstrap 4, so it's definitely been a process of learning.</p>
  
  <p>I've got the site layout working fine, but I realize that my left-sided vertical nav bar has a lot of links. Many of these grouped in collapsed nests.</p>
  
  <p>I think it would be nice to add a search bar at the top of my nav so that I can filter the links based on partial strings entered in the search bar. This works for links that are not hiding inside a hidden div (or <code>class=collapsed</code> boostrap 4 ul).</p>
  
  <p>I'd appreciate assistance in modifying my code to show filtered results that include any links hiding inside the collapsed ul?</p>
  
  <p><a href="https://jsfiddle.net/hematogones/fwq9ov6m/1/" rel="noreferrer">Here's a fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.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?
  
      });
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="link-content"&gt;
    &lt;ul class="sidebar-nav navbar-nav"&gt;
      &lt;li class="nav-item active"&gt;
        &lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-fw fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;label for="nav-search" class="col-2 col-form-label sr-only"&gt;Search links&lt;/label&gt;
        &lt;div class="col p-2"&gt;
          &lt;input class="form-control form-control-sm search-filter" type="search" id="nav-search" placeholder="Search for tools"&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;span class="navbar-brand"&gt;Popular tools&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-fw fa-calculator"&gt;&lt;/i&gt; Calculator&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-fw fa-battery-3"&gt;&lt;/i&gt; Battery &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-fw fa-database"&gt;&lt;/i&gt; Pancake Batter&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-fw fa-clock-o"&gt;&lt;/i&gt; Marzipan&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-fw fa-tags"&gt;&lt;/i&gt; Cakes and Muffins&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;span class="navbar-brand"&gt;Categories&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents"&gt;&lt;i class="fa fa-fw fa-flask"&gt;&lt;/i&gt; Cars&lt;/a&gt;
        &lt;ul class="sidebar-second-level collapse" id="collapseComponents"&gt;
          &lt;li&gt;
            &lt;a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2"&gt;American&lt;/a&gt;
            &lt;ul class="sidebar-third-level collapse" id="collapseMulti2"&gt;
              &lt;li&gt;
                &lt;a href="#"&gt;Ford&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#"&gt;GMC&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti3"&gt;European&lt;/a&gt;
            &lt;ul class="sidebar-third-level collapse" id="collapseMulti3"&gt;
              &lt;li&gt;
                &lt;a href="#"&gt;BMW&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#"&gt;Audi&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>