當按下箭頭鍵時，JS Div沒有改變顏色

對，這很奇怪，我不知道爲什麼會發生這種情況，但我正在做的是我有一個搜索字段，用戶輸入一個名稱，我希望它以顯示建議，現在這是可行的，但是當用戶使用箭頭鍵（向上或向下）時，對象應該是高亮的，基本上就像標準自動完成，只是具有不同的設計。當按下箭頭鍵時，JS Div沒有改變顏色

問題是高光位，當我按下向下箭頭時，只要按住箭頭鍵，對象就會亮起來，但它不會停留在高光。我想不通爲什麼，我下面貼相關的代碼，我希望有人能夠幫助：

主文件（文本框）：

<div style="position: relative; top: 0px; left: -51px; width: 200px;"> 
    <form method="GET" action="" style="padding: 0px; padding-right: 10px; margin: 0px;"> 
     <input type="text" id="search_field" onkeyup="javascript: suggestions(this.value);" autocomplete="off" style="border: 0px solid #ffffff; width: 250px; padding-left: 20px; color: #ffffff; height: 30px; border-bottom: 1px solid #333333; background: #222222;" name="q" placeholder="Search MVDb"> 
    </form> 
    <div style="position: absolute; left: 2px; top: 8px;"> 
    <img height="15" src="img/search.png"> 
    </div> 
</div> 

<div id="result" style="z-index: 100; position: absolute; cursor: pointer; top: 86px; right: 5px; width: 251px; background: #eeeeee;"> 

</div>

與ID結果DIV就是這些建議會被加載進去。

主文件（jQuery的/ JS）：

function suggestions(value){ 
    $.ajax({ 
     url: 'get_suggestion.php?q='+value, 
     success: function(data) { 
      $('#result').html(data);  
     } 
    }); 
} 

$(document).ready(function() { 
    $("#search_field").keydown(function(e) { 
     if (e.keyCode == 40) { 
      //DOWN 
      document.getElementById('search_result_0').style.background = "#333333"; 
      e.preventDefault(); 
      return false; 
     } 
    else if (e.keyCode == 38) { 
     //UP 
     e.preventDefault(); 
     return false; 
    } 
    });  
});

get_suggestion.php：

<?php 
include 'js/db/db.php'; 
$value = $_GET["q"]; 
if($value==""){ 

} 
else{ 
    $value = trim($value); 
    $query="select * from movies where title like \"%$value%\" LIMIT 6"; 
    $rt=mysql_query($query); 
    echo mysql_error(); 
    $counter = -1; 
    while($nt=mysql_fetch_array($rt)){ 
     $counter = $counter+1; 
?> 
<div id="search_result_<?php echo $counter ?>" cellspacing="0" cellpadding="0" onClick="window.location = 'movie.php?movie=<?php echo $nt['title']?>'" width="100%" style="color: #333333; cursor: pointer;"> 
    <table cellspacing="0" cellpadding="0"> 
     <tr valign="top"> 
      <td style="padding: 5px; width: 30px;"> 
       <img height="60" src="http://210.177.0.75/mvdb/img/covers/<?php echo $nt['title'] ?>.jpg"> 
      </td> 
      <td align="left" style="padding: 5px;"> 
       <?php 
        $title = substr($nt[title], 0, 17); 
        if($title == $nt[title]){ 

        } 
        else{ 
         $title = $title."..."; 
        } 
       ?> 
       <font style="font-family: Arial; font-size: 15px; font-weight: bold;"><?php echo $title ?></font> &nbsp; <img src="img/age/BBFC <?php echo $nt['bbfc_age'] ?>_small.png"><br> 
       <font style="font-family: Arial; font-size: 12px; color: #aaaaaa;">Tom Cruise, Michelle Monaga</font> 
       <font style="font-family: Arial; font-size: 12px; color: #aaaaaa;">Released: 4 May 2006</font> 
      </td> 
     </tr> 
    </table> 
</div> 
<?php 
} 
    } 
    ?>

我試圖格式化代碼，以及可能的。我認爲這可能是當用戶按下箭頭鍵時，ajax請求被觸發，但這不會有任何意義，因爲我正在使用e.preventDefault（）來阻止這一點，有人知道爲什麼會發生這種情況嗎？

來源

2012-05-31 Lennart Hase

您對執行ajax請求的箭頭鍵是正確的。你已經在keydown函數中使用了e.preventDefault，但在keyup中沒有。相反的onkeyup屬性的，我建議你把你的以下功能的keydown這一權利：

$("#search_field").keyup(function(e) { 
    if (e.keyCode < 41 && e.keyCode > 36) { 
     suggestions(this.val()); 
    } 
});

應該出來。

來源

2012-05-31 14:50:00

好的:)在你發佈你的答案之前，我設法解決了這個問題，但是我剛剛意識到這一點以及......愚蠢的我。感謝您清理它，花時間閱讀相當長的問題，雖然:) –

當按下箭頭鍵時，JS Div沒有改變顏色

回答

相關問題