How can I filter my bootstrap 4 navbar links with a search bar?

Question

I'm transitioning my old website using Bootstrap 4, so it's definitely been a process of learning. 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. 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 `class=collapsed` boostrap 4 ul). I'd appreciate assistance in modifying my code to show filtered results that include any links hiding inside the collapsed ul? Here's a fiddle ``` $('.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…

Accepted Answer

Okay, I think i've figured it out on my own (with a little help from this post for a case insensitive filter). 1) I updated the links by wrapping them in a `div with id #link-content`, to separate my filter from the home and search input. 2) I added the case insensitive method referenced above My HTML: ``` ``` My updated code: ``` // 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(); } }); ``` Here is a fiddle with the working example that opens any hidden links (collapsed class in boostrap 4).

How can I filter my bootstrap 4 navbar links with a search bar?

Solution

Problem

Related problems