Question

我在页面顶部有一个搜索框。使用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>

Answer 1

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

喜欢：

<div id="results" style="position:absolute">

Answer 2

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

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

javascript / php div下拉搜索结果

2 个答案: