我有一个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. '';
}
}
}
}
?>
答案 0 :(得分:5)
看起来Google使用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" />
答案 1 :(得分:0)
我仍然不确定你想要效果的确切位置,如果它的文本框然后在keyup事件上将之前的文本颜色属性改为昏暗的颜色,即
。$( '#查询')的CSS( '颜色', '灰色');
这会将文本的颜色更改为灰色。或者您也可以尝试更改它的不透明度。
id的样式
#gray
谷歌使用。
#grey {
background: none repeat scroll 0 0 #FFFFFF;
border-color: transparent;
color: silver;
overflow: hidden;
position: absolute;
z-index: 1;
}
因此,在第一步中,您将使用z-index显示自动提示的文本,并在下一步中显示用户键入的文本,这将为您提供与谷歌相同的效果。