jQuery自动完成输入文本框的背景

Question

我有一个jQuery文本框自动完成脚本,它使用PHP脚本来查询MySQL数据库.目前,结果显示在文本框下,但我希望它看起来好像在文本框中淡出.我怎么能这样做？Google即时搜索框就是一个例子.

我目前的网页代码是:

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

我的PHP代码是:

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

看起来Google使用了2个输入，一个带有灰色文本，另一个带有黑色文本。然后将它们覆盖，以使灰色文本输入位于底部，而黑色文本输入位于顶部（z索引看起来更大）。

灰色输入包含全文和建议，黑色输入仅显示您输入的内容。希望这可以帮助您找出代码。这是Google的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>

编辑：这是一些HTML和CSS的非常简化的版本，您可以使用 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" />