Send focus to dynamic li with jQuery

Question

I was wondering if you can send focus to a dynamic li. Here's what I'm trying to do:

I've got a search box that has a keyup function bound to it where it searches for people's names. The results appear in a div right below the search box with a ul of results. I was hoping to make it where if someone hits the down arrow button that the focus gets switched to the first element of the ul. Kind of like how a drop down works. Here's the code (I didn't put in all the CSS so it doesn't look as pretty as it should--just FYI)

$(document).ready(function(){
  $('#search_name').keyup(function(e) {
		if(e.which == 40){
			//It does get here, and does find the li, BUT doesn't send the focus
			$('#search_results').find('li:first').focus();
			return ;
		}
        //This is the function that displays the UL in #search_results
	     /*delay_call(function(){
	    	searchNameDept();
	    }, 500 ); */
	});
});

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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>
    </ul>
  </div>
</form>

I have tried $('#search_results').find('li:first').focus(), $('#search_results').find('li:first').trigger('focus'). Nothing works. Anyone have any feedback?

Answer 1

you need to just play with CSS & some jquery here. here is your fiddle. https://jsfiddle.net/7h0pavzb/ need to add a class to show that it is selected.

your jquery

$(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 ;
        }
    });
});

and the style what i append is,

#search_results li.active { background:#000; color:#fff; }

here is another fiddle for up and down arrow key. https://jsfiddle.net/7h0pavzb/1/