title: Send focus to dynamic li with jQuery
body: <p>I was wondering if you can send focus to a dynamic li. Here's what I'm trying to do:</p>
  
  <p>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)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 ); */
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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 &gt; a{
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    padding:0 10px;
    background-color: #ec9507;
  }
  #search &gt; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form action="#" method="post" class="boxy" id="search"&gt;
    &lt;input type="text" name="search_name" id="search_name" class="boxy" value="DIRECTORY" autocomplete="off" /&gt;
    &lt;a href="javascript:void(0)" class="center_flex"&gt;Search&lt;/a&gt;
    &lt;div id="search_results"&gt;
      &lt;!-- Example content that is printed out after searchNameDept() is run --&gt;
      &lt;ul&gt;
        &lt;li class="search_org"&gt;Sally Joe&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried $('#search_results').find('li:first').focus(), $('#search_results').find('li:first').trigger('focus'). Nothing works. Anyone have any feedback?</p>