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

Question

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

jquery的

 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.

根据评论这里选择的类没有被删除在firebug中检查。见下图。

希望它有所帮助。