jQuery autocomplete in background of input text box

Question

I have a jQuery text box autocomplete script which uses a PHP script to query a MySQL database. Currently, a result is displayed under the text box however I want it to appear as if it is faded out in the text box. How can I do something like this? An example of this is on the Google Instant search box.

My current web page code is:

<script type='text/javascript'>
function lookup(a)
{
    if(a.length==0)
    {
        $("#suggestions").hide();
    }
    else
    {
        $.post("suggest.php", { query: ""+a+"" }, function(b)
        {
            $("#suggestions").html(b).show();
        });
    }
}
</script>

<input type='text' id='query' onkeyup='lookup(this.value);'>
<div id='suggestions'></div>

And my PHP code is:

<?php
$database = new mysqli('localhost', 'username', 'password', 'database');

if(isset($_POST['query']))
{
    $query = $database->real_escape_string($_POST['query']);

    if(strlen($query) > 0)
    {
        $suggestions = $database->query("SELECT name, value FROM search WHERE name LIKE '%" . $query . "%' ORDER BY value DESC LIMIT 1");

        if($suggestions)
        {
            while($result = $suggestions->fetch_object())
            {
                echo '' . $result->name. '';
            }
        }
    }
}
?>

Answer 1

It looks like Google uses 2 inputs, one with grey text, and another with black text. Then they are overlayed so that the grey text input is on the bottom and the black text input is on top (greater z-index it looks like).

They grey input contains the full text plus the suggestion and the black input only displays what you typed. Hopefully this can help you figure out the code. Here's Google's html:

<div style="position:relative;zoom:1"> 
  <div style="position:relative;background:transparent"> 
    <input type="text" maxlength="2048" id="grey" disabled="disabled" autocomplete="off" class="lst"> 
    <div id="misspell" class="lst"></div> 
  </div> 
  <div> 
    <div class="lst" style="position: absolute; top: -900px; left: -9000px; max-width: 3000px; overflow: hidden; width: auto;"></div>
    <input type="text" maxlength="2048" name="q" class="lst" autocomplete="off" size="41" title="Search" value=""> 
    <span id="tsf-oq" style="display:none"></span> 
  </div> 
</div>

EDIT: Here's a very simplified version of some html and css you could potentially use http://jsfiddle.net/JRxnR/

#grey
{
    color: #CCC;
    background-color: transparent;
    top: 0px;
    left: 0px;
    position:absolute;
}
#black
{
    color: #000;
    background-color: transparent;
    z-index: 999;
    top: 0px;
    left: 0px;
    position:absolute;
}

<input id="grey" type="text" value="test auto complete" />
<input id="black" type="text" value="test" />

Answer 2

i am still not sure where exactly you want the effect if its the text box then on keyup event change the previous text color property to a dim color ie

$('#query').css('color','gray');

this will change the color of the text to gray. Or you can try changing the opacity of it as well.

style of id

#gray

used by google.

#grey {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: transparent;
    color: silver;
    overflow: hidden;
    position: absolute;
    z-index: 1;
}

so in first step you display the autosuggested text using z-index and in the next step you display the text which user typeded in and that will give you the same effect of google.