title: Select li element with arrow keys (up and down) using (jQuery) from li tag in ajax response
body: <p>In below code i am getting values using foreach loop in li  tag those li contain name and id so what i expect is when it display li item one by one when arrow down or arrow up  key press particular value get selected and show value 'a' or 'b' in text box with that select value id show in input type hidden box again select next value show that  id in hidden and value appear in text box .here is my code.</p>
  
  <pre><code> output:
      &lt;start output here&gt;
          &lt;li  class="optn_list"  data-id='  1 ' data-uname=' a '&gt;value a&lt;/li&gt;
          &lt;li  class="optn_list"  data-id='  2 ' data-uname=' b '&gt;value b&lt;/li&gt;
          &lt;li  class="optn_list"  data-id=' 3' data-uname='c '&gt;value c&lt;/li&gt;
  
      &lt;end of output&gt;
  
          &lt;input type="text" name="usr_name" id="search_user_name" value=""    /&gt;
          &lt;input type="hidden"  id="hidden_id" value=""    /&gt;
  
  
              function get_user_name() {
                              var name = 'xyz';
                              $.ajax({
                                  url: "&lt;?= base_url('controller/method') ?&gt;",
                                  type: "POST",
                                  data: {
                                      name: name,
                                  },
                                  success: function (response) {
  
                                      $(".user_res").html('&lt;div id="getTagField"&gt;&lt;ul&gt;' + response + '&lt;/ul&gt;&lt;/div&gt;');
  
  $('input').keydown(function(e)
  {
   if ( key !== 40 &amp;&amp; key !== 38 ) return;
  else{
  
  //here how to write condition to select one by one list item using arrow up or down key with focus on selected item
  
  }
  )};
  
  
                                  }
  
                              });
  
                          }
  </code></pre>