1

ユーザーが入力フィールドに入力すると、関連する検索結果に表示される単純な検索フィールドを作成しました。1つを除いて、すべてがうまく機能します。入力フィールドには、テーブルでユーザーに表示される検索結果を取得するjQuery関数をトリガーする「onkeyup」イベントがあります。最初の結果（行）が強調表示されます。ユーザーが矢印キーを使用して検索結果のテーブルを上下に移動できるようにしたい。ただし、入力フィールドには「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 に答える