Filterable Content

by shanejones

HTML

<div class="content">
  <input type="text" class="quick-filter">
  <div class="f-content">
    <div class="f">unbiased</div>
    <div class="f">umbrella</div>
    <div class="f">shelf</div>
    <div class="f">sweet</div>
    <div class="f">pollution</div>
    <div class="f">insurance</div>
    <div class="f">toothsome</div>
    <div class="f">note</div>
    <div class="f">nonchalant</div>
    <div class="f">nebulous</div>
    <div class="f">badge</div>
    <div class="f">warm</div>
  </div>
  
</div>

JavaScript

$('.quick-filter').keyup(function(e){
		var search = $(this).val();
		var filterable = $(this).parent().find('.f-content .f');

		if(search == '') {
			filterable.show();

		} else {
			filterable.hide();
			filterable.each(function() {

			var search_text = $(this).text();

			console.log(search_text)

			if (search_text.toLowerCase().indexOf( search.toLowerCase() ) >= 0){
				$(this).show()
			}
			
			});
		}
	})