Cyber Spiderman #2

by chovy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
  Instructions:
  Complete this exercise using jQuery. 
  Allow a user to filter the content by typing in the search bar. 
  Only items with text that match with what a user typed into the search bar should display. 
  Everything else should be hidden.
  When the search bar is empty, everything should be shown. 
  Use jQuery's annimated toggle() function to toggle the display of each item (not toggle(boolean) or show() & hide()). Use fast(or 200) as the animation speed. 
  Feel Free to modify the html content if desired. 
  Feel Free to add styles to make it look more pleasing if desired. 
-->

<input id="searchBar"/>
<div id="contentWrapper">
  <div>
    <span>Emojo Pillow</span>
  </div>
  <div>
    <span>Myr</span>
  </div>
  <div>
    <span>Online Purchases</span>
  </div>
  <div>
    <span>Tamadra</span>
  </div>
  <div>
    <span>Virtual Prize</span>
  </div>
</div>

CSS

#contentWrapper span{
  background: rgba(40, 200, 40, 0.4);
  width: 250px;
  display:inline-block;
  padding:8px;
  margin:2px 0px;
}

JavaScript

(function ($) {
	$('#searchBar').on('keyup', filterResults);

	function filterResults(e){
  	const $el = $(e.currentTarget);
    const val = $el.val();
    const $els = $('#contentWrapper div');
    
    $els.map((i, el) => {
  		const $text = $(el).find('span').text().toLowerCase();
      const isMatch = $text.indexOf(val.toLowerCase()) > -1;
      
      $(el).toggle(isMatch);
    });
  }
})(jQuery);