JQuery Search Filter

by Venkatesh Dematti

HTML

<input type="text" placeholder="Search Here" id="search">

<ul id="searchElem">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<h1 class='errMsg' style='display:none; text-align:center;'>Results Not Found</h1>

JavaScript

var errMsg = $('.errMsg');
$("#search").keyup(function() {
  var val = $(this).val()
  var valToLower = val.toLowerCase();
  var foundMatch = false;
  $("#searchElem li").each(function(i) {
    var content = $(this).html();
    if (content.toLowerCase().indexOf(valToLower) == -1) {
      $(this).hide();
    } else {
      foundMatch = true;
      $(this).show();
    }
  });
  errMsg.toggle(!foundMatch);
});