Javascript display help with Live Search function

[atzaman]

Hi

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:

HTML

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

JAVASCRIPT

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

PHP

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

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