使用自动提示中的上/下键向上/向下切换

debugcn 发表于 Dev

用户名

我正在尝试使用Ajax与php和mysql进行自动建议。自动建议效果很好，但是在按下向上键时出现问题。我以这个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>

糯米饭

这是您的问题的解决方案：

您调用两个事件，例如：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);
        }
    });

在这里检查小提琴。

并根据评论这里选定的类没有删除检查在萤火虫。见下图。

在此处输入图片说明