title: Scroll up and down with arrow key on <ul> <li>
body: <p>The problem is that i want the  to scroll with the keyboard keys but it doesn't work. so I want to get the scroll with li element and scroll to it's position. And I can't make it work.</p>
  
  <p><a href="https://i.stack.imgur.com/pKTX3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pKTX3.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="col-md-7 col-sm-7 col-md-offset-4 col-xs-12 city-item--add"&gt;  
                    &lt;div class="quickSearchContainer" &gt;
                        &lt;input id="autocomplete" name="query" placeholder="Add More Currency" class="searchfield" type="search" autocomplete="off"&gt;
                        &lt;div class="quickSearchDiv"&gt;
                              &lt;ul class="quickSearch" &gt;
                                  &lt;?php
                                     if (count($currencies) &gt; 1) {
              $dd = 0; 
              foreach ($currencies as $row) {
                  if($row-&gt;currency_standard==1 or $row-&gt;currency_standard==2){
                  $dd++;
                  ?&gt;
                  &lt;li tabindex="&lt;?php echo $dd ?&gt;" class="data &lt;?php if ($dd == 1) {
                      echo 'selected';
                  } ?&gt;" &gt;
                      &lt;a tabindex='-1'  href='javascript:void(0);' onclick="dispSelection('&lt;?php echo strtolower($row-&gt;country_slug); ?&gt;')"&gt;
                          &lt;span id="country" &gt;
                              &lt;span id="city" &gt;&lt;?php echo $row-&gt;currency_full_name ?&gt;&lt;/span&gt;
                              &lt;img alt="&lt;?php echo $row-&gt;country_name; ?&gt;" height="20" width="20"  src="&lt;?php echo base_url('uploads/flags/16x16/' . strtolower($row-&gt;country_code) . '.png'); ?&gt;"&gt;
                          &lt;/span&gt;
                          &lt;span id="region"&gt; 
                  &lt;?php if ($row-&gt;currency_name) { ?&gt;
                      &lt;?php echo $row-&gt;currency_name ?&gt; &amp;nbsp;&amp;nbsp;-&amp;nbsp;&amp;nbsp;
                  &lt;?php } ?&gt;
                  &lt;?php echo $row-&gt;country_name ?&gt;
                              &lt;span id="cityname"&gt;&lt;?php echo strtolower($row-&gt;country_slug); ?&gt;&lt;/span&gt;
                          &lt;/span&gt; 
                      &lt;/a&gt;&lt;/li&gt;
                  &lt;?php $city = '';
                  $code = '';
                  }}}
              ?&gt;  
                              &lt;/ul&gt;   
          &lt;/div&gt;  
               &lt;/div&gt;  
                    &lt;/div&gt;  
  </code></pre>
  
  <p>JS code</p>
  
  <pre><code> $("#autocomplete").keydown(function (e) { 
                 var valued='';
                $(".quickSearch li:first").addClass('');
                  var selected = $(".quickSearch .selected"); 
                  if (e.keyCode == 38) { // up
                      $(".quickSearch .selected").removeClass("selected");
                      if (selected.prev().length == 0) {
                          $(".quickSearch li:last").addClass("selected");
                       valued= $(".quickSearch li:last").find('#city').html()
                      } else {
                          selected.prev().addClass("selected");
              valued= $(".quickSearch .selected").find('#city').html().trim();
                      } 
                 document.getElementById("autocomplete").value =valued.trim();
                  }
                  if (e.keyCode == 40) { // down
                      var selected = $(".quickSearch .selected");
                      $(".quickSearch .selected").removeClass("selected");
                      if (selected.next().length == 0) {
                          $(".quickSearch li:first").addClass("selected");
                       valued= $(".quickSearch li:first").find('#city').html()
                      } else {
                          selected.next().addClass("selected");
              valued= $(".quickSearch .selected").find('#city').html().trim();
                      } 
                        document.getElementById("autocomplete").value =valued.trim();
                  }
              });
  </code></pre>
  
  <p>when pressing the up and down keys selected class working but the ul li with the results isn't scrolling.</p>