如何实现谷歌类似于build议的input字段？
我目前正在开发自己的自动完成/build议脚本，并希望Google在其主网站上实现类似的效果。
当用户开始input（例如stack ）时，下面的下拉列表中将显示4条build议，但是…同时位于顶部的显示将以灰色显示在“input”字段中：
怎样才能把另一个stringinput不同的风格？
这是一个<span>input与更大的z-index值？ 当我点击string的灰色部分时，input字段没有得到焦点，所以我相信有一些东西必须被覆盖。
如果实际上这是坐在input上的一个<span> （或另一个<div> ），那么他们如何知道string（ stack ）的第一部分结束以及在哪里定位（宽度） overflow字（在这种情况下）。
有谁知道如何达到这个效果？
在检查代码后，我发现它是另一个input字段上的input字段。 自动完成的input字段被设置为禁用，给它灰色。
使用这种方法，他们不需要像上面所说的那样计算string的结束位置，只需将实际的input字段绝对放在自动input字段上即可。
例： 
更新
这里是一个快速演示http://jsfiddle.net/dargf/
当然，你将不得不添加自己的自动完成的JavaScript，但这是一个风格的例子。
HTML
<div> <input id="main" type="text" /> <input id="autocomplete" type="text" disabled="disabled" /> </div>
CSS
div { position: relative; } #main{ position: absolute; top: 0; left: 0; z-index: 11; background: transparent; } #autocomplete{ position: absolute; top: 0; left: 0; background: transparent; z-index: 10; }
Javascsript
$('#main').keyup(function(e){ console.log(e); $('#autocomplete').val($(this).val() + 'asdf') });
试试这个： input文本框背景中的jQuery自动完成
看起来像两个input，一个在灰色背后，一个在前面透明。
searchinput具有透明的背景，并且还有另一个被禁用的input字段（具有较低的z-index），具有build议的值，因此在禁用字段中只能看到灰色部分（有完整的文本，但不能被看作是主input中的字母有黑色）。
两者绝对定位于相同的位置。
