添加键盘快捷键（上，下，输入）以搜索输入建议div

Question

我有一个搜索建议div，当keyUp输入时出现。这工作正常，但现在我试图使键盘快捷键在行动。

我想，当你点击下来键盘上的箭头按钮span像一个行为被选中，如果选中它，然后另一span是经过被选中，同样，如果你点击了箭头向上span被选中，当你点击时输入然后链接打开。

我被卡住了，因为我无法删除：悬停并无法向其中添加类。即使我基本上不知道如何去做。但我真的很努力和很多..

这是一个jsfiddle link（键入任何字段）。也许有人会帮助我。

Answer 1

此代码应该去当请求时，正在返回的数据：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     total = 3; 
     $(".result-item").mouseenter(
      function(){ 
       hovered = $(this).attr("id"); 
       total = 3; 

       $(".result-item").each(function(){ 
        $(this).children("a").css({ 
         'background-color':'#e4e4e4', 
         'color':'#000000' 
        }); 

        $(this).find(".searchheading").css({ 
          'color':'#191919' 
         }); 

        $(this).find(".searchcaption").css({ 
         'color':'#555555' 
        }); 
       }); 

       $(this).children("a").css({ 
        'background-color':'#b7b7b7', 
        'color':'#ffffff' 
       }); 

       $(this).find(".searchheading").css({ 
        'color':'#ffffff' 
       }); 

       $(this).find(".searchcaption").css({ 
        'color':'#f1f1f1' 
       }); 
      } 
     ); 

    }); 
</script> 

而这种代码的网页上，其中提出要求：

$("#suggestions").hide(); 

       $("#search").bind('keyup', function(event){ 
        if (event.which == 40 || event.which == 38 || event.which == 13) return false; 
        else 
        { 
         hovered = undefined; 
         lookup($(this).val()); 
        } 
       }); 


       $("#search").bind('keydown', 'down', function(evt){ 
        if ($("#suggestions").is(":visible")) 
        { 
         if (typeof hovered == 'undefined') 
         { 
          $("#result-item-0").trigger("mouseenter"); 
          return; 
         } 

         count = parseInt($("#"+hovered).attr("count")); 
         next = (count + 1); 

         if (next == total) 
          next = 0; 

         $("#result-item-"+next).trigger("mouseenter"); 
        } 
       }); 

       $("#search").bind('keydown', 'up', function(evt){ 
        if ($("#suggestions").is(":visible")) 
        { 
         if (typeof hovered == 'undefined') 
         { 
          $("#result-item-"+(total-1)).trigger("mouseenter"); 
          return; 
         } 

         count = parseInt($("#"+hovered).attr("count")); 
         prev = (count - 1); 

         if (prev == -1) 
          prev = (total-1); 

         $("#result-item-"+prev).trigger("mouseenter"); 
        } 
       }); 

       $("#search").bind('keydown', 'return', function(evt){ 
        if ($("#suggestions").is(":visible")) 
        { 
         if (typeof hovered == 'undefined') 
         { 
          str = $("#search").val(); 
          window.location.href = urlencode(str); // urlencode is a custom function 
          return false; 
         } 

         count = parseInt($("#"+hovered).attr("count")); 
         current = count; 
         $("#result-item-"+current).trigger("mouseenter"); 

         $("#suggestions").fadeOut(); 
         window.location.href = $("#"+hovered).children("a").attr("href"); 
        } 
       }); 

      }) 

;

另外我删除了onkeyup=""属性元素，这种方法更好。