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

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

$(".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）密钥是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;
  }
});

请注意，'varfocusedIndex = -1;'

也需要在首次搜索中重置，这样您将获得数组位置

希望我能帮忙

使用<ul> <li>上的箭头键上下滚动

2 个答案: