如何实现谷歌类似于建议的输入字段？

我目前正在研究自己的自动完成/建议脚本，并且希望Google在其主要网站上实现类似的效果。如何实现谷歌类似于建议的输入字段？

当用户开始输入时（例如stack），下面的下拉列表中会显示4条建议，但是......同时，位于顶部的显示将以灰色显示“in”输入字段：

Screenshot

如何将有可能把另一个字符串输入具有不同的风格？

这是一个<span>输入与更大的z-index值？当我点击字符串的灰色部分时，输入字段没有得到焦点，所以我相信有一些东西必须在它之上。

事实上，如果这是一个<span>（或其他<div>）坐在了输入的话怎么办，他们知道该字符串的第一部分（stack）结束，在哪里放置（宽度）overflow字（在这种情况下，）。

有谁知道如何达到这个效果？

来源

2012-05-29 mar

检查代码后，我发现它是另一个input字段顶部的input字段。自动完成的input字段被设置为禁用，并将其设置为灰色。

使用这种方法，他们不必像上面说的那样计算字符串的结束位置，只是将实际的input字段绝对放在自动编码器input字段上。

例子： enter image description here

更新

这里是一个快速演示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') 
});

来源

2012-05-31 13:03:20 guanome

请注意，这对于IE10，IE9以及可能低于11的所有版本无法正常工作。使用IETester并通过更改IE11中的“文档模式”进行测试。谷歌似乎并没有显示在IE中的第二个输入字段（即使是IE11，但它的工作原理） – personne3000

要使其在IE10中工作 - （请参阅http://stackoverflow.com/questions/15662687/ie10-anchor-tag-z- index-issue），为#main而不是“transparent”使用“background：rgba（0,0,0,0）”;我还建议为#autocomplete使用“background：white”而不是“transparent”。 – personne3000

由guanome为上述答案创建了一个Jsfiddle。看一下这个。 https://jsfiddle.net/2tuo2hvn/4/ – akniazi