1

我创建了一个简单的搜索字段，当用户输入输入字段时，它将在相关搜索结果中进行 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
    }
4

1 回答 1

0

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

现场示例：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'); 
        }
    }); 
});

​</p>

HTML

<input id='search' type='text' />​
于 2012-05-08T03:23:14.980 回答