jQuery自动完成在输入文本框的背景 [英] jQuery autocomplete in background of input text box

问题描述

我有一个jQuery文本框自动完成脚本，它使用PHP脚本查询MySQL数据库。目前，结果显示在文本框下，但我希望它显示为在文本框中淡出。我如何做这样的事情？

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.

我目前的网页代码是：

<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. '';
            }
        }
    }
}
?>

推荐答案

看起来Google使用了2个输入，文本，另一个与黑色文本。然后它们被重叠，以便灰色文本输入在底部，黑色文本输入在顶部（更大的z-index它看起来像）。

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

包含全文加上建议，黑色输入仅显示您键入的内容。希望这可以帮助你找出代码。这里是Google的html：

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>

编辑：
这是一个非常简化版本的一些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" />

这篇关于jQuery自动完成在输入文本框的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！