Question

我有一个由ajax实时搜索生成的ul列表，对于该列表我想要进行密钥导航，到目前为止我有这个代码：

   $(document).ready(function(){
      //on focus when arrow down is pressed
      $("#s").focus(function(){
        $("#s").keydown(function(e){
          if(e.which === 40){ //on arrow down
            if($('ul#searchresults li').length >= 1){ //if has one or more li
              if(!$('ul#searchresults li').hasClass('liSelected')){ //if has selected class
                $('ul#searchresults li:first-child').addClass('liSelected');
              } else {
                $('ul#searchresults li.liSelected').next().addClass('liSelected');
                $('ul#searchresults li.liSelected').first().removeClass('liSelected');
              }
            }
          }
        });
      });


       $("#s").focusout(function(){
          $('ul#searchresults li.liSelected').first().removeClass('liSelected');
       });

    });

这里是html：

<form role="search" method="get" autocomplete="off" id="searchform" action="http://localhost/site/" class="searchbar-nav">
    <div class="row collapse">
        <input type="text" name="s" id="s" placeholder="Search game">
    </div>
</form>

<ul id="searchresults" class="searchresults">
   <li id="101" class="liSelected">Mirror's Edge Catalyst</li>
   <li id="95" class="">Minecraft</li>
   <li id="106" class="">Middle-earth: Shadow of Mordor</li>
</ul>

这样做是：当我使用id #s关注该输入并按下向下箭头键时，它会将所选类提供给第一个项目，如果没有li包含所选类，如果没有li，则会添加选择下一个li的类，然后从之前具有所选类的li中删除它。这非常有效。

但是，当我集中注意力并重新关注它时，只是出现故障，我不知道为什么。当我按下箭头键时它不会做同样的事情，它不会跳到下一个li并且通常会卡住。

我希望有人失去了什么功能以及造成这种情况的原因。任何帮助表示赞赏！

Answer 1

我相信这里发生的事情就是每次搜索框获得焦点时都会绑定keydown事件。为防止这种情况发生，您可以在焦点输出时解除绑定。

$("#s").focusout(function(){
    $('#s').unbind('keydown');
    $('ul#searchresults li.liSelected').first().removeClass('liSelected');
});

我也有点被带走，并在一个jsfiddle做了一些修改。我认为可能有用的一个主要变化就是将列表的当前选择存储在一个变量中。通过这样做，您可以针对var运行一些逻辑检查，而不是每次都执行jQuery查找。这可以帮助您提高性能。它也应该在被按下的不同类型的键之间共享 - 如向上箭头。无论如何，如果你愿意，这就是https://jsfiddle.net/sm1215/nxfgvjdg/4/

当聚焦时，ul列表键导航中断/故障

1 个答案: