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/

Answer 2

Refering to jQuery's .focus() documentation

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

So simply add tabindex="10" attribute to your <li> tags so they can be focused. Or you can also wrap the LI's content into <a href="#"></a>, as links are focusable elements.

Another way to achieve this result would be by simply adding a class to your "focused" <li> tag.

Answer 3

Just try below solution.

Hope it helps.

	$('#productname').keydown(function(e) {
  var key = e.which;
  if (key == 38 || key == 40) {
var storeTarget = "";

if (e.which == 40) {
  if ($("ul#suggestion-list li.active").length != 0) {
    storeTarget = $('#ul#suggestion-list').find("li.active").next();
    $("ul#suggestion-list li.active").removeClass("active");
    storeTarget.focus().addClass("active");
  } else {
    $('ul#suggestion-list').find("li:first").focus().addClass("active");
  }
  return;
}
  }
});

<div id="addproduct">
  <table>
<tr>
  <td>Product Name:</td>
  <td>
    <input type="text" name="" id="productname" placeholder="Product Name" size="40" />
  </td>
  <td> Quantity </td>
  <td>
    <input type="text" name="quantity" id="quantity" placeholder="QTY" size="3" />
  </td>
  <td>
    <input type="button" id="add" value="Add" />
  </td>
</tr>
<tr>
  <td></td>
  <td>
    <ul id="suggestion-list"></ul>
  </td>
  <td></td>
  <td></td>
  <td></td>
</tr>
  </table>
</div>