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 a

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:

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;
}