javascript 输入文本框背景中的jQuery自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6336094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery autocomplete in background of input text box
提问by Callum Whyte
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.
我有一个 jQuery 文本框自动完成脚本，它使用 PHP 脚本来查询 MySQL 数据库。目前，结果显示在文本框下，但我希望它看起来好像在文本框中淡出一样。我怎么能做这样的事情？Google Instant 搜索框就是一个例子。
My current web page code is:
我当前的网页代码是：
<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>
And my PHP code is:
我的 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. '';
}
}
}
}
?>
采纳答案by fehays
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 使用了 2 个输入，一个是灰色文本，另一个是黑色文本。然后将它们叠加起来，使灰色文本输入在底部，黑色文本输入在顶部（看起来更大的 z-index）。
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:
灰色输入包含全文和建议，黑色输入仅显示您输入的内容。希望这可以帮助您找出代码。这是谷歌的 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>
EDIT: Here's a very simplified version of some html and css you could potentially use http://jsfiddle.net/JRxnR/
编辑：这是一些 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" />
回答by Khurram Ijaz
i am still not sure where exactly you want the effect if its the text box then on keyup event change the previous text color property to a dim color i.e.
如果它的文本框然后在 keyup 事件上将以前的文本颜色属性更改为暗色，我仍然不确定您想要的效果到底在哪里
$('#query').css('color','gray');
$('#query').css('颜色','灰色');
this will change the color of the text to gray. Or you can try changing the opacity of it as well.
这会将文本的颜色更改为灰色。或者您也可以尝试更改它的不透明度。
style of id
身风格
#gray
＃灰色的
used by google.
谷歌使用。
#grey {
background: none repeat scroll 0 0 #FFFFFF;
border-color: transparent;
color: silver;
overflow: hidden;
position: absolute;
z-index: 1;
}
so in first step you display the autosuggested text using z-index and in the next step you display the text which user typeded in and that will give you the same effect of google.
因此在第一步中，您使用 z-index 显示自动建议的文本，然后在下一步中显示用户输入的文本，这将为您提供与 google 相同的效果。
