Scroll up and down with arrow key on <ul> <li>

Question

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.

<div class="col-md-7 col-sm-7 col-md-offset-4 col-xs-12 city-item--add">  
                  <div class="quickSearchContainer" >
                      <input id="autocomplete" name="query" placeholder="Add More Currency" class="searchfield" type="search" autocomplete="off">
                      <div class="quickSearchDiv">
                            <ul class="quickSearch" >
                                <?php
                                   if (count($currencies) > 1) {
            $dd = 0; 
            foreach ($currencies as $row) {
                if($row->currency_standard==1 or $row->currency_standard==2){
                $dd++;
                ?>
                <li tabindex="<?php echo $dd ?>" class="data <?php if ($dd == 1) {
                    echo 'selected';
                } ?>" >
                    <a tabindex='-1'  href='javascript:void(0);' onclick="dispSelection('<?php echo strtolower($row->country_slug); ?>')">
                        <span id="country" >
                            <span id="city" ><?php echo $row->currency_full_name ?></span>
                            <img alt="<?php echo $row->country_name; ?>" height="20" width="20"  src="<?php echo base_url('uploads/flags/16x16/' . strtolower($row->country_code) . '.png'); ?>">
                        </span>
                        <span id="region"> 
                <?php if ($row->currency_name) { ?>
                    <?php echo $row->currency_name ?> &nbsp;&nbsp;-&nbsp;&nbsp;
                <?php } ?>
                <?php echo $row->country_name ?>
                            <span id="cityname"><?php echo strtolower($row->country_slug); ?></span>
                        </span> 
                    </a></li>
                <?php $city = '';
                $code = '';
                }}}
            ?>  
                            </ul>   
        </div>  
             </div>  
                  </div>  

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

when pressing the up and down keys selected class working but the ul li with the results isn't scrolling.

Answer 1

A bit late but i got an answer:)

you need to catch a keyup event on your document for that (at least my solution)

you need to check for a few things,

1)that the current focused element is part of your list

2)that the key is keyDown or KeyUp

so it will look something like this

var focusedIndex = -1;
$(document).on("keyup", function (e) {
  var element = $(document.activeElement);
  if (element.attr("localName") == "li") {//notice to give a better identifier
    var menu = element.closest(".quickSearch");
    if (e.key != undefined && e.key == "ArrowDown") {
      focusedIndex++;
    } else if (e.key != undefined && e.key == "ArrowUp") {
      focusedIndex--;
    }
    if (focusedIndex>=0) {
      menu.find("a")[focusedIndex].focus();
    } else {
      menu.siblings(".searchfield").focus();
    }
  } else{
    focusedIndex = -1;
  }
});

notice that the 'var focusedIndex = -1;'

need to be reset in the first search as well so you will have an array postion

hoped i helped

Answer 2

Try getting focus on the element that gets selected. It will automatically scroll it in view if not already present.

$(".quickSearch").find(".selected a")[0].focus()

Call the above line in function as shown below

$("#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();
    }
    $(".quickSearch").find(".selected a")[0].focus()
});