2012-11-24 3 views
3

페이지 상단에 검색 창이 있습니다. 아약스 사용 페이지 위로 div를 두어 검색 결과를 표시하고 싶습니다. 핵심은 검색 결과가 페이지를 아래로 밀어 내리는 것이 아니라 아래로 밀어 내리는 것입니다. 이런 이유로, 나는 searchbox 밑에 div를 가질 수 없다. 좀 더 복잡한 작업이 필요합니다. 그러나 무엇이 확실하지 않습니다.javascript/php div 드롭 다운 검색 결과

다음 코드는 검색 상자 아래에 div를 채 웁니다. 누구든지 div를 페이지를 넘기보다는 모든 것을 푸시 다운하는 경제적 방법을 제안 할 수 있습니까? 어떤 제안을 주셔서 감사합니다!

자바 스크립트

function showResults(str) { 

document.getElementById("results").innerHTML=xmlhttp.responseText; 
document.getElementById("results").style.border="1px solid #A5ACB2"; 

//some ajax 

xmlhttp.open("GET","search.php?str="+str,true); 
xmlhttp.send(); 
} 

HTML 당신은 절대적으로 당신의 결과 DIV를 배치해야

<html> 
<body> 
<table><tr><td><img src="logo.gif"></td><td> 
<input type="text" id="string" onkeyup="showResults(this.value)"> 
<div id="results"></div><td></tr> 
<tr><td colspan=2 
Main body of page. All sorts of text and html go here that I do not want pushed down. 
</td></tr></table> 
</body> 
</html> 
+0

절대적으로 배치하십시오. – j08691

+0

div를 절대적으로 위치 시키시겠습니까? – user1260310

답변

1
<html> 
<body> 
<table><tr><td><img src="logo.gif"></td><td style="position:relative"> 
<input type="text" id="string" onkeyup="showResults(this.value)"> 
<div id="results" style="position:absolute"></div><td></tr> 
<tr><td colspan=2 
Main body of page. All sorts of text and html go here that I do not want pushed down. 
</td></tr></table> 
</body> 
</html> 

위치 상대하고 해결책을 찾기 위해 도움이 될 것 절대, 같은 시간, 온로드, 당신은 당신이 가지고있는 결과를 한번 사업부를 숨길 검색해야 다시 보여줘.

+0

도움이되었습니다. 결과가 페이지를 덮어 씁니다. 그러나 페이지가 투명하게 표시됩니다. 또한, 그들은 테이블에 머무르지 않고 화면 오른쪽으로 이동합니다. 어떻게 든 div 형식을 지정해야합니까? – user1260310

+0

위치가 절대적으로 주어지면 TD에 상대적으로 위치를 지정할 수 있습니다. 왜 투명하게되는지, 즉 어디를 투명하게하는지 의미합니다. 코드를 공유 할 수 있습니까? –

+0

나는 내가 아는 한 투명하게 만들지 않았다. 방금 스타일

에 추가되었습니다. 클래스에서 CSS를 사용하여 div 스타일을 지정할 수 있습니까? 또한 상자 밖을 클릭하면 현재 수행하지 않는 드롭 다운을 사라지게하는 방법이 필요합니다. – user1260310

1

.

처럼 :

<div id="results" style="position:absolute"> 
관련 문제