Не удается получить поиск страницы для перехода к следующему объекту при нажатии ENTER

Question

Этот поисковый запрос, который я написал, работает нормально, за исключением того, что я не могу заставить его перейти к следующему объекту в search_results при нажатии клавиши ENTER. Я думаю, что моя проблема заключается в переменной object_number. Какие-либо предложения? Спасибо.

Это мой HTML:

<div id="search-page-container">
Search names<br><input id="search-page" type="text" />
<div id="search-result"></div>
<div id="result-up"><img src="image/down-arrow.png"></div>
<div id="result-down"><img src="image/up-arrow.png"></div>
</div>

Это мой JQuery. При активации все объекты с классом ".search-drug" подсвечиваются Нажатие «результат-вверх» и «результат-вниз» работает нормально. Когда нажата клавиша ENTER, она переходит к следующему параметру search_term один раз, а при повторном нажатии она возвращается к тому же результату.

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

$(document).ready(function(){
     $("#search-page" ).keyup(function(e) {
     if (e.which != 13) {var object_number = 0;}
     var search_term = $('#search-page').val();
     var search_count = $(".search-drug:contains('" + search_term + "')").length;
     var search_results = $(".search-drug:contains('" + search_term + "')");
    
     if ((search_count != 0) && (search_term != '')) {
     	if (e.which != 13) {
     		$('html, body').animate({ scrollTop: $(search_results[0]).offset().top - 165}, 400);
    	}
     	$(".search-drug:contains('" + search_term + "')").addClass('highlight');
     	$('.search-drug:not(:contains('+ search_term +'))').removeClass('highlight');
     	document.getElementById('search-result').innerHTML = search_count;
     	
     	if (e.which == 13) {
     		object_number = search_results.index(); 
     	  if ((object_number <= (search_count - 1)) && (object_number != 0)) {
      	object_number--;
      	$('html, body').animate({ scrollTop: $(search_results[object_number]).offset().top - 165}, 0);
      	}
      	else {
      	object_number = search_count - 1;
      	$('html, body').animate({ scrollTop: $(search_results[object_number]).offset().top - 165}, 0);
      	}
    	}
    	
     	$("#result-up" ).click(function() {
     		if (object_number < (search_count - 1)) {
      	object_number++;
      	$('html, body').animate({ scrollTop: $(search_results[object_number]).offset().top - 165}, 0);
      	}
      	else {
      	object_number = 0;
      	$('html, body').animate({ scrollTop: $(search_results[object_number]).offset().top - 165}, 0);
      	}
      })
      
     	$("#result-down" ).click(function() {
     		if ((object_number <= (search_count - 1)) && (object_number != 0)) {
      	object_number--;
      	$('html, body').animate({ scrollTop: $(search_results[object_number]).offset().top - 165}, 0);
      	}
      	else {
      	object_number = search_count - 1;
      	$('html, body').animate({ scrollTop: $(search_results[object_number]).offset().top - 165}, 0);
      	}
    	})
    }
     else {
     	$(".search-drug").removeClass('highlight');
      document.getElementById('search-result').innerHTML = '';
      $("#result-up").off();
      $("#result-down").off();
     }
    })
    });

#search-page-container {
	padding:5px;
	border:3px #D4D0D0 solid;
	border-radius: 6px;
	background-color: #DFDFDF;
	text-align:left;
	position:fixed;
	top:100px;
	right: 3%;
	font-size: 100%;
	font-weight:bold;
	color:grey;
	display:inline-block;
	width:190px;
}

@media screen and (max-width: 600px) {

#search-page-container {
	bottom:77px;
	left: 20px;
	top:auto;
}
}

.highlight {
	background-color:yellow;
}

#search-page {
	width: 90px;
	margin:5px 5px 0 0;
	color:black;
	display:inline-block;
	border:0;
	padding:0 0 0 3px;
}

#search-page-container {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

#search-result {
	width:20px;
	color:black;
	display:inline-block;
	vertical-align:bottom;
	font-size:90%;
	border:0;
	margin:0 3px 0px 3px;
}

#result-up, #result-down {
	cursor:pointer;
	display:inline-block;
}

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="search-page-container">
Search names<br><input id="search-page" type="text" />
<div id="search-result"></div>
<div id="result-up">DOWN</div>
<div id="result-down">UP</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>



<li class="search-drug">Result 1</li>
<br>
<br>
<br>
<br>
<br>
<br>

<li class="search-drug">Result 2</li>
<br>
<br>
<br>
<br>
<br>

<li class="search-drug">Result 3</li>
<br>
<br>
<br>
<br>
<br>

<li class="search-drug">Result 4</li>
<br>
<br>
<br>
<br>
<br>
<br>

<li class="search-drug">Result 5</li>
<br>
<br>
<br>
<br>
<br>

<li class="search-drug">Result 6</li>
<br>
<br>
<br>
<br>
<br>

<li class="search-drug">Result 7</li>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>