矢印キーで表の行をナビゲートできるようにするには、どのように 'onkeyup'イベントトリガーをオーバーライドしますか？

Question

ユーザーが入力フィールドに入力すると、関連する検索結果にajaxという簡単な検索フィールドが作成されました。 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 
    } 

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' />​ 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.