JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.js"></script>
<form action="#" method="post" class="boxy" id="search">
  <input type="text" name="search_name" id="search_name" class="boxy" value="DIRECTORY" autocomplete="off" />
  <a href="javascript:void(0)" class="center_flex">Search</a>
  <div id="search_results">
    <!-- Example content that is printed out after searchNameDept() is run -->
    <ul>
      <li class="search_org">Sally Joe</li>
        <li class="search_org">Sally Joe</li>
          <li class="search_org">Sally Joe</li>
            <li class="search_org">Sally Joe</li>
              <li class="search_org">Sally Joe</li>
                <li class="search_org">Sally Joe</li>
	  <li class="search_org">Sally Joe</li>
    </ul>
  </div>
</form>

CSS

#search{
  position: relative;
  right:0;
  margin:0 1em;
  width:350px;
}
#search{
  top:0;
  z-index:10;
}
#search_name{
  
  display:block;
  padding:10px 50px 10px 10px;
  border:0;
  margin:0;
}
#search > a{
  position: absolute;
  right:0;
  top:0;
  bottom:0;
  padding:0 10px;
  background-color: #ec9507;
}
#search > a i{
  color:#fff;
}
#search_results{
  position: absolute;
  top:100%;
  left: 0;
  right:0;
  max-height: 200px;
  overflow: auto;
}
#search_results ul{
  width: 100%;
  margin:0;
  padding:0;
}
#search_results li{
  width: 100%;
  list-style-type: none;
  box-sizing: border-box;
  margin:0;
  padding:10px 15px;
  background-color: #fff;
  border-top:1px solid #ccc;
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
  cursor:pointer;
  word-wrap:break-word;
}
#search_results li:hover, #search_results li:focus{
  color:#fff;
  background-color: #27c7f4;
}
#search_results li i{
  padding-right:5px;
}
#search_results li.active { background:#000; color:#fff; }

JavaScript

$(document).ready(function(){
  $('#search_name').keyup(function(e) {
		if(e.which == 40){
			if($("#search_results li.active").length!=0) {
				var storeTarget	= $('#search_results').find("li.active").next();
				$("#search_results li.active").removeClass("active");
				storeTarget.focus().addClass("active");
			}
			else {
				$('#search_results').find("li:first").focus().addClass("active");
			}
			return ;
		}
		if(e.which == 38){
			if($("#search_results li.active").length!=0) {
				var storeTarget	= $('#search_results').find("li.active").prev();
				$("#search_results li.active").removeClass("active");
				storeTarget.focus().addClass("active");
			}
			else {
				$('#search_results').find("li:first").focus().addClass("active");
			}
			return ;
		}
	});
});