javascript - 在自动建议中使用上下键向上/向下切换

Question

我正在尝试使用带有 php 和 mysql 的 ajax 进行自动建议。自动建议运行良好，但我在使用上下键切换时遇到问题。我正在关注这个 jsfiddle作为完成我的工作的例子。但是无法理解为什么 Navigate 函数被调用了两次。因为当我按下按键时它会发出两次警报。

j查询

 var Navigate = function(diff){


 displayBoxIndex += diff;

    var oBoxCollection = $("#searched a .searchFull");

    if (displayBoxIndex >= oBoxCollection.length) {
        displayBoxIndex = 0;
        alert("A");
    }
    if (displayBoxIndex < 0) {
        displayBoxIndex = oBoxCollection.length - 1;
        alert("B");
    }
    var cssClass = "selected";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);

}
$(document).on('keypress keyup', "#search", function (e) {
    if (e.keyCode == 13 || e.keyCode == 32) {
        $('.display_box_hover').trigger('click');
        return false;
    }
    if (e.keyCode == 40) {
        //down arrow
        Navigate(1);
    }
    if (e.keyCode == 38) {
        //up arrow
        Navigate(-1);
    }
});

HTML

 <div id="searched" style="display: block;">
   <a href="http://localhost/c2c/init/product/78">
      <div class="searchFull">
   </a>
   <a href="http://localhost/c2c/init/product/77">
      <div class="searchFull">
   </a>
   <a href="http://localhost/c2c/init/product/76">
      <div class="searchFull">
   </a>
   <a href="http://localhost/c2c/init/product/73">
      <div class="searchFull">
   </a>

Answer 1

这是针对您的问题的解决方案:

您调用两个事件，如:keypress 和 keyup。所以，它会调用两次。只需删除一个像这里我删除 keypress 在这里它工作得很好。

$(document).on('keyup', function (e) {
        if (e.keyCode == 13 || e.keyCode == 32) {
            $('.display_box_hover').trigger('click');
            return false;
        }
        if (e.keyCode == 40) {
            //down arrow
            //alert("down");
            Navigate(1);
        }
        if (e.keyCode == 38) {
            //up arrow
            Navigate(-1);
        }
    });

检查 Fiddle here.

并且根据评论 Here selected class not removed checked in firebug。见下图。

希望对您有所帮助。