On page search

by DannyEnglander

HTML

<input class="on-page-search" />
<div class="links">
  <p>
    <a class="demo-links" href="#">BBC sports page links</a><br>
    <a class="demo-links" href="#">link to the ITV homepage</a><br>
    <a class="demo-links" href="#">read about Channel 4 films</a><br>
    <a class="demo-links" href="#">Google is the number one search engine</a><br>
    <a class="demo-links" href="#">Yahoo – who?</a><br>
    <a class="demo-links" href="#">Bing – rhymes with ding</a>
  </p>
</div>

CSS

/* Style the input */

.on-page-search {
  font-size: 14px;
  line-height: 26px;
  color: #787d85;
  background-color: #fcfcfc;
  border: 1px solid #e0e1e1;
  padding: 5px 15px;
}

/* Style the list */

.demo-links {
  border-bottom: none;
  padding: 5px 5px;
  line-height: 36px;
  text-decoration: none;
  color: gray;
}

/* Style the results */

.noresults {
  color: #f3f4f5;
}

.results {
  background: #de1919;
  color: white;
}

.results:hover {
  background: #333;
  color: white;
}

JavaScript

$(".on-page-search").on("keyup", function() {
  var v = $(this).val();
  $(".results").removeClass("results");
  $(".noresults").removeClass("noresults");
  $("a.demo-links").each(function() {
    if (v != "" && $(this).text().search(new RegExp(v, 'gi')) != -1) {
      $(this).addClass("results");
    } else if (v != "" && $(this).text().search(v) != 1) {
      $(this).addClass("noresults");
    }
  });
});