javascript/php div 下拉搜索结果答案

【问题标题】：javascript/php div dropdown search resultsjavascript/php div 下拉搜索结果
【发布时间】：2012-11-12 14:57:39
【问题描述】：

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

【问题讨论】：

绝对定位div？

标签： javascript search dropdownbox

【解决方案1】：

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

喜欢：

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

【讨论】：

【解决方案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，一旦搜索结果进入，你必须再次显示它。

【讨论】：

这有帮助。结果覆盖了页面。但是，它们是透明的，因此页面可以显示出来。而且，他们并没有呆在桌子上，而是一直走到屏幕的右侧。我需要以某种方式格式化 div 吗？
作为绝对位置，你可以相对于它的TD定位，为什么你会变得透明，这意味着你已经给了一些透明的地方。可以分享一下代码吗？
据我所知，我还没有做到透明。刚刚在样式
中添加。我可以在类中使用 css 来设置 div 的样式吗？此外，当您在框外单击时，需要一种使下拉菜单消失的方法，而目前它不会这样做。
你必须添加位置：相对于hoding TD也
我用 css 标签设计了它，它看起来更好。仍有一些问题，但正在标记答案正确。谢谢。