Прокрутите вверх и вниз с помощью клавиши со стрелкой на <ul><li>

Question

Проблема в том, что я хочу прокручивать клавиши клавиатуры, но это не работает.поэтому я хочу получить свиток с элементом li и прокрутить до его положения.И я не могу заставить его работать.

<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

 $("#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();
                }
            });

при нажатии вверх и внизКлавиши выбранного класса работают, но результат с результатами не прокручивается.

Answer 1

Немного поздно, но я получил ответ:)

вам нужно поймать событие keyup в вашем документе для этого (по крайней мере, мое решение)

вам нужно проверить несколько

1) что текущий фокусированный элемент является частью вашего списка

2) что ключ это keyDown или KeyUp

, поэтому он будет выглядеть примерно так

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

обратите внимание, что 'varfoInIndex = -1;'

также необходимо сбросить при первом поиске, чтобы у вас была позиция массива

, надеюсь, я помог

Answer 2

Попробуйте сфокусироваться на выбранном элементе.Он будет автоматически прокручиваться, если его еще нет.

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

Вызовите вышеуказанную строку в функции, как показано ниже

$("#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()
});