2010-05-08 6 views
0

내 블로그에 대한 실시간 검색을 만들고 있습니다.이 스크립트는 w3 학교에서 가져온 것으로, 마우스를 위아래로 위 아래로 키보드를 추가해야합니다. ..자바 스크립트에 키 다운 및 키 업 이벤트를 추가하는 방법

<html> 
<head> 
<script type="text/javascript"> 
function showResult(str) 
{ 
if (str.length==0) 
    { 
    document.getElementById("livesearch").innerHTML=""; 
    document.getElementById("livesearch").style.border="0px"; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText; 
    document.getElementById("livesearch").style.border="1px solid #A5ACB2"; 
    } 
    } 
xmlhttp.open("GET","livesearch.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 

<form> 
<input type="text" size="30" onkeyup="showResult(this.value)" /> 
<div id="livesearch"></div> 
</form> 

</body> 
</html> 

답변

1

그냥 요소에 추가 :

<input onkeyup="showResult(this.value)" onkeydown="showResult(this.value)" type="text" size="30" /> 
0

내가 < 입력 TYPE = "텍스트"= 사용할 때 onKeyPress "doThings을();" onkeydown = "doThings();"/ >

마우스 사용에는 onmousedown 및 onmouseup 이벤트를 사용하십시오.

0

자바 스크립트 라이브러리 (예 : jQuery)를 사용하여 학습하십시오. 수동으로 이벤트를 처리하는 것은 고통 스럽습니다. 작성해야하는 코드의 절반은 다양한 브라우저 불일치에 대한 호환성 래퍼가 될 것이기 때문입니다. 같은이 AJAX 마찬가지입니다 : jQuery를에 아이디 foo와 요소에를 keyDown 핸들러를 추가하는 것은 간단

$('#foo').keydown(function() { 
    // do stuff 
}); 

로 편집입니다. 질문에 붙여 넣은 코드는 jQuery에서 다음과 같이 표시됩니다.

function showResult(str) { 
    if (str.length==0) { 
    $('#livesearch').html('').css('border', 0); 
    return; 
    } 
    $.get('livesearch.php', {q: str}, function(data) { 
    $('#livesearch').html(data).css('border', '1px solid #A5ACB2'); 
    }); 
} 
관련 문제