3

我在页面顶部有一个搜索框。使用 ajax 我想要一个 div 在页面上下拉以显示搜索结果。关键是我希望搜索结果覆盖下面的页面而不是向下推。出于这个原因，我不能只在搜索框下方放置一个 div。我需要做一些更复杂的事情——但我不确定是什么。

以下代码在搜索框下填充了一个 div。任何人都可以提出一种经济的方法来让 div 浏览页面而不是将所有内容都向下推。感谢您的任何建议！

javascript

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

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

2 回答 2

1

你必须绝对定位你的结果 div。

像 ：

<div id="results" style="position:absolute">
于 2012-11-24T15:50:19.780 回答
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>

position relative 和 absolute 将帮助您找到解决方案，同时，onload，您需要隐藏 div，一旦搜索结果，您必须再次显示它。

于 2012-11-24T15:51:02.840 回答