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

我有一个jQuery文本框自动完成脚本，它使用PHP脚本来查询MySQL数据库。目前，结果显示在文本框下，但我希望它显示为在文本框中淡出。我该如何做这样的事情？ Google Instant搜索框就是一个例子。jQuery自动完成在输入文本框的背景

我当前网页的代码是：

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

来源

2011-06-13 Cosmo Posmo

我刚刚修改的代码，使之更好的阅读。我建议将代码更加分开，以便在将来进行调试并不困难。 – Bojangles 2011-06-13 21:25:37

看起来谷歌使用2个输入，一个输入灰色文本，另一个输入黑色文本。然后将它们叠加，以便灰色文本输入位于底部，黑色文本输入位于顶部（看起来像z-index更大）。

灰色输入包含全文加上建议，黑色输入只显示您输入的内容。希望这可以帮助你弄清代码。下面是谷歌的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" />

来源

2011-06-13 21:02:52 fehays

我现在还不能确定究竟在何处你想要的效果，如果它的文本框，然后在KEYUP事件将以前的文本颜色属性更改为暗色即

$（'＃query'）.css（'color'，'gray'）;

这会将文本的颜色更改为灰色。或者你可以尝试改变它的不透明度。 ID的

风格

#gray

由谷歌使用。

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

所以在第一步骤中使用的z-index你显示autosuggested文本并且在下一步骤中显示哪个用户在typeded的文本和会给你谷歌的相同的效果。

来源

2011-06-13 20:50:37

如果您希望自动提示的文本显示为灰色，并且您输入的文本为黑色，那么对于我来说也很有趣，因为您无法选择自动提示的文本，因为它显示为就像添加为图像或背景文本字段而不是文本类型。 – 2011-06-13 20:59:23

是的，我已经确认它使用萤火虫他们使用z-index属性为自动创建的文本出现在背景中。聪明的效果 – 2011-06-13 21:05:10

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

回答

相关问题