JSFiddle - React, Tailwind, and code Playground

by huppen

JavaScript

$('input#search').on('keyup', function() {
  var lookup = $("li a.artist").text();
  var keyword = $("input#search").val();
  if (keyword.replace(/^\s+|\s+$/g, "").length != 0) {
    function countOcurrences(str, value) {
      var regExp = new RegExp(value, "gi");
      return (str.match(regExp) || []).length;
    }

    $("span.search.result").text(countOcurrences(lookup, keyword) + "x");
  } else {
    $("span.search.result").text("");
  }
}); //Count search term
var target;
var samepos;
$('input#search').keyup(function(e) {
  if (e.keyCode == 13) {
    $("#songkick li").removeClass("highlight");
    var keyword = $("input#search").val();
    if (keyword.replace(/^\s+|\s+$/g, "").length != 0) {
      $("#songkick li ").filter(function() {
        return $(this).text().toLowerCase().indexOf(keyword.toLowerCase()) >= 0;
      }).addClass("highlight");
      if ($(".highlight").length) {
        //$('html, body').animate({scrollTop: $('.highlight').offset().top}, 300);

        $(".highlight").each(function(i, element) {
          target = $(element).offset().top;
          if (target > $(document).scrollTop()) {
            console.log(target);
            return false; // break
          } else {
            samepos = target;
          }
        }); //each function
      }
      $("html, body").animate({
        scrollTop: target
      }, 300);
      if (samepos === target) {
        target = 0;
        $('html, body').animate({
          scrollTop: target
        }, 300);
        $("#songkick li").removeClass("highlight");
        return false; // break
      }
    }
  }
  if (e.keyCode == 27) {
    $("#songkick li").removeClass("highlight");
    $("input#search").val("").focus();
    $("span.search.result").text("");
    //$('html, body').animate({scrollTop: 0}, 300);
  }
});

$('.menu span.showme').on('click', function() {
  $("#songkick li").removeClass("highlight");
  var keyword = $("input#search").val();
  $("input#search").focus();
  if...