Fatal编程技术网
  • javascript/
  • Javascript 按下箭头键时JS Div不改变颜色

Javascript 按下箭头键时JS Div不改变颜色

javascript jquery html

Javascript 按下箭头键时JS Div不改变颜色,javascript,jquery,html,Javascript,Jquery,Html,对，这很奇怪，我不知道为什么会发生这种情况，但我正在做的是我有一个搜索字段，用户在其中输入一个名称，我希望它显示建议，现在这是可行的，但当用户使用箭头键（向上或向下）时，对象应该亮起，基本上就像一个标准的自动完成只是一个不同的设计 问题是hilighting位，当我按下向下箭头时，只要我按住箭头键，对象就会亮起，但它不会保持hilighting。我不明白为什么，我已经在下面发布了相关代码，希望有人能帮助我： 主文件（文本字段）： <div style="position: relative

对，这很奇怪，我不知道为什么会发生这种情况，但我正在做的是我有一个搜索字段，用户在其中输入一个名称，我希望它显示建议，现在这是可行的，但当用户使用箭头键（向上或向下）时，对象应该亮起，基本上就像一个标准的自动完成只是一个不同的设计

问题是hilighting位，当我按下向下箭头时，只要我按住箭头键，对象就会亮起，但它不会保持hilighting。我不明白为什么，我已经在下面发布了相关代码，希望有人能帮助我：

主文件（文本字段）：

<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>

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;
   }
   });      
});

<?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
}  
  }
  ?>
get\u suggestion.php:

<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>

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;
   }
   });      
});

<?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请求的箭头键，您是对的。您在keydown函数中使用了
e.preventDefault
，但在keydup函数中没有使用。与其使用
onkeyup
属性，我建议您将其放在keydown函数的正下方：


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



$（“#搜索_字段”）.keyup（函数（e）{
如果（e.keyCode<41和&e.keyCode>36）{
建议（this.val（））；
}
});


应该可以解决了。
好的：）在你发布答案之前的几秒钟，我设法解决了这个问题，但是的，我也意识到了。。。愚蠢的我。谢谢你把它整理好，并花时间阅读这个相当长的问题：）