javascript/php div dropdown search results

StackOverflow https://stackoverflow.com/questions/13542716

  •  01-12-2021
  •  | 
  •  

Question

I have a searchbox at the top of a page. Using ajax I want a div to drop down over the page to display search results. The key thing is I want the search results to overlay the page underneath rather than push it down. For this reason, I cannot just have a div underneath the searchbox. I need to do something a bit more complicated--but I am not sure what.

Following code populates a div under the searchbox. Can anyone suggest an economical way to get div to go over the page rather than push everything down. Thanks for any suggestions!

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>
Was it helpful?

Solution 

<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 and absolute will help you to find the solution, and the same time, onload, you need to hide the div, once search result in, you have to show it again.

OTHER TIPS

You have to position your result div absolutely.

Like :

<div id="results" style="position:absolute">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top