Filter by Search

by Damian Toczek

HTML

<input placeholder="Search Me" id="box" type="text" />

<ul class="navList">
    <li>apples</li>
    <li>apricots apples</li>
    <li>acai</li>
    <li>blueberry</li>
    <li>bananas</li>
    <li>cherry</li>
    <li>coconut</li>
    <li>donut</li>
    <li>durean</li>
</ul>

JavaScript

jQuery(document).ready(function(a) {
  var b = ["H1", "H2", "H3", "H4", "H5", "H6"];
  a("nav").click(function(i) {
    var h = i.target,
      f = h.nodeName.toUpperCase();
    if (a.inArray(f, b) > -1) {
      var d = a(h).next();
      var c = a(d).parents().length;
      var g = a("nav p, nav div").filter(function() {
        if (a(this).parents().length >= c && this !== d.get(0)) {
          return true
        }
      });
      a(g).slideUp(0);
      d.slideToggle(0, function() {
        a("nav :visible:last")
      })
    }
  });
  
    $("#nav").hide();
    $("#btn").click(function() {
      $("#nav").toggle()
    })
    
    
    
  
  
  
  const checkFilter = () => {
  const filterElements = Array.prototype.slice.call(document.body.querySelectorAll('#fltr input'));
  const usedFilters = filterElements.filter(el => el.checked).map(el => el.value);

	document.body.querySelectorAll('[data-filters]').forEach(item => {
  	const itemFilters = item.getAttribute('data-filters').split(' ');
    const matches = itemFilters.some(filter => usedFilters.indexOf(filter) >= 0);
   
    item.style.display = matches ? 'block' : 'none';
  });
};

document.body.querySelector('#fltr').addEventListener('change', checkFilter)

checkFilter();






$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.navList > li').show();
    } else {
        $('.navList > li').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});





});