Simulating search results

by lasha

HTML

<input type="text" placeholder="Search..." class="input-search">
<div class="results">
  <div class="results-set results-set-1">
    <h3>Lending section!</h3>
    More lending stuff<br>
    More routing stuff<br>
    More routing stuff<br>
    More routing stuff
  </div>
  <div class="results-set results-set-2">
    <h3>Routing Number 00134234</h3>
    More routing stuff<br>
    More routing stuff<br>
    More routing stuff
  </div>
  <div class="results-set results-set-3">Set 3</div>
</div>

CSS

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0;}
.input-search {
  padding: 10px;
  border: 1px solid #ccc;
  width: 50%;
  outline: 0;
  font-size: 16px;
}
.results {
  border: 1px solid #ccc;
  padding: 12px 15px;
  display: none;
  background-color: #fff;
}
.results-set {
  display: none;
  line-height: 1.5;
/*   border: 1px solid #ccc;
  padding: 5px; */
}
.active {
  display: block;
}

JavaScript

var $inputSearch = $('.input-search');
var val = "";
var $results = $('.results');
var $resultsSets = $results.children();

function hideAll(){
	$results.removeClass('active');
  $resultsSets.eq(0).removeClass('active');
  $resultsSets.eq(1).removeClass('active');
  $resultsSets.eq(2).removeClass('active');
}

$inputSearch.on('keyup', function(e){
	val = $inputSearch.val();

  if(val.length < 3){
  	hideAll();
  	return;
  }
  
  if("lending".indexOf(val) >= 0 && val.length){
  	$resultsSets.eq(0).addClass('active');
    $results.addClass('active');
  }
  else if("routing number".indexOf(val) >= 0 && val.length){
  	$resultsSets.eq(1).addClass('active');
    $results.addClass('active');
  }
  else {
  	hideAll();
  }
	
});