Wondering if someone could kindly help me with this small problem. I'm quite new to Javascript so not quite sure how to do this.

I'm creating a live search functionality on a site which is all working fine. As I enter the letters it displays the search results as it should. The problem I'm having is that the search results are currently being displayed in a div container under the search box which means everything on the page below the search box moves down the page.

What I'm looking for is for the results to be shown in a box which "hovers" over the other information so the layout isn't disturbed. Hope I'm explaining myself properly :confused:

Here is my current code:


<input type="text" onkeyup="getMerchants(this.value)"/>
<br />
<div id="results"></div>


function getMerchants(value) {
    $.post("liveSearch.php",{partialSearch:value},function(data) {


$partialSearch = $_POST['partialSearch'];

$search = mysql_query("SELECT Name FROM merchants WHERE Name LIKE '%$partialSearch%'");

while ($row = mysql_fetch_array($search)) {
  echo "<div>{$row['Name']}</div>";

If someone could guide me in the right direction I would be eternally grateful :$

8 Years
Discussion Span
Last Post by atzaman

Just had a thought... I could just do it the following way:

$partialSearch = $_POST['partialSearch'];

$search = mysql_query("SELECT * FROM merchants WHERE Name LIKE '%$partialSearch%'");

echo "<div style=\"position:absolute;z-index:999;background-color:#fff;padding:5px;border:1px solid #ccc;width:200px;\">";

while ($row = mysql_fetch_array($search)) {
  echo "{$row['Name']}<br />";

echo "</div>";

Or is there a better way to do it?

Edited by atzaman: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.