맞습니다. 이상하게 보입니다. 왜 이런 일이 일어나고 있는지 잘 모르겠지만 사용자가 이름을 입력하고 싶습니다. 제안을 표시하기 위해 이제는 작동하지만 사용자가 화살표 키 (위쪽 또는 아래쪽)를 사용할 때 객체는 기본적으로 다른 디자인으로 된 표준 자동 완성과 마찬가지로 hilight해야합니다.화살표 키를 눌렀을 때 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>
아이디 결과와 사업부를 어디 제안이로드됩니다.
기본 파일 (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> <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()를 사용하여 이것을 감지하지 못했고, 왜 이런 일이 일어나는 지 알 수 있습니까?
괜찮 았어 :) 나는 당신이 당신의 대답을 게시하기 전에이 초를 해결할 수 있었다. 그러나 그렇다 나는 그것을 단지 깨달았다. .. 어리 석다. 그것을 지우고 오히려 긴 질문을 읽고 시간을 보내 주셔서 감사합니다 :) –