Question

我创建了一个简单的搜索字段，当用户输入到输入字段时，该搜索字段会在相关搜索结果中显示ajax。除了一件事，一切都很好。输入字段有一个'onkeyup'事件，触发一个抓取搜索结果的jQuery函数，该函数在表中显示给用户。第一个结果（行）突出显示。我想允许用户使用箭头键在搜索结果表中上下导航。但是，由于输入字段具有'onkeyup'事件触发器，只要按下向下箭头键（短暂突出显示下一个表行），我的'onkeyup'jQuery函数再次被触发，重新突出显示第一个搜索结果（第一个）行）。我需要一种方法来防止每次箭头键“未按下”时触发'onkeyup'功能。这有意义吗？我是以错误的方式接近这个吗？以下是一些代码：

HTML：

<input id="search" type="text" onkeyup="showResult(this.value)" />

jQuery的：

function showResult(str)
{
    var e = str.charAt( str.length-1 )

    if(e.keyCode == 38 || e.keyCode == 40)
    {
        $(document).keydown(function(e)
        {
            if (e.keyCode == 40)
            { 
               $('tr.highlight').next("tr").addClass("highlight");
               $('tr.highlight:first').removeClass("highlight");
               return false;
            }
            else if (e.keyCode == 38)
            { 
               $('tr.highlight').prev("tr").addClass("highlight");
               $('tr.highlight:last').removeClass("highlight");
               return false;
            }
        });
    else
    {
        // code that gets the search results
    }

Answer 1

你很接近，但更简单的解决方案是：

直播示例：http://jsfiddle.net/EwB6s/1/

的JavaScript

$(function(){    
    $('#search').keyup(function(e){
        if(e.keyCode == 38 || e.keyCode == 40){
            if (e.keyCode == 40){ 
               alert('down'); 
               return false;
            }
            else if (e.keyCode == 38){ 
               alert('up'); 
               return false;
            }
        }else{
            // code that gets the search results
            alert('ajax'); 
        }
    }); 
});

HTML

<input id='search' type='text' />

如何覆盖'onkeyup'事件触发器以允许使用箭头键导航表行？

1 个答案: