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

当按下向上和向下键选择的类工作但带有结果的 ul li 没有滚动。

Answer 1

尝试将注意力集中在被选中的元素上。如果它不存在，它将自动在视图中滚动。

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

Answer 2

有点晚了，但我得到了答案:)

为此，您需要在文档上捕获 keyup 事件（至少是我的解决方案）

你需要检查一些事情，

1)当前焦点元素是列表的一部分

2)key是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;
  }
});

注意'var focusIndex = -1;'

在第一次搜索时也需要重新设置，这样你就会有一个数组位置

希望我能帮上忙