谷歌如何在主搜索栏中做半成品鬼文字？答案

【问题标题】：how does Google do the half finished ghost text in the main search bar?谷歌如何在主搜索栏中做半成品鬼文字？
【发布时间】：2012-02-17 09:06:27
【问题描述】：

当您开始在搜索栏中键入熟悉的内容时，它将以幻影文本完成。由于文本不可突出显示，我猜它是生成和定位的背景图像。有谁知道他们实际上是如何做到的？我想建立类似的东西。

【问题讨论】：

它不是图片，只有文字......它是一个建议/自动完成的东西
我知道它是什么。你怎么确定是文字而不是图片？
我确定它是文本，因为我查看了代码。

标签： javascript html css

【解决方案1】：

这是谷歌的做法：

在透明输入框后面是一个包含输入字母的 div 以及一个带有“ghost”字样的容器。它们都经过精心对齐，使键入的字母完美地隐藏了“鬼字”的字母。

【讨论】：

太棒了！如果我想不出更好的方法，我就是这么想的。但我想现在看起来已经足够合法了。

【解决方案2】：

是文字。同一位置有多个 div。您输入的文本和灰色的自动建议文本位于两个单独的 div 中。

那里也有一个文本输入，但在您输入文本时它没有任何价值。如果需要，我假设它在某些时候填充了 javascript。

无论如何，您可以通过在搜索框中输入几个字母、右键单击、点击“检查元素”并在 DOM 检查器中查看一下来确认这一点。

我对发生的事情的解释是这样的：

您在文本框中输入
文本框会立即被清除，您在其中输入的任何内容都会放在“黑色”div中
自动建议例程发生，“灰色” div 被建议的单词的其余部分填充。

【讨论】：

没有理由清除输入文本框。让它不可见就足够了。通过不清除输入文本框，您可以让浏览器处理所有编辑（光标移动、剪切/复制/粘贴等）。您只需要在输入文本框发生更改时读取它的当前值，然后执行您的自动建议。
好吧，似乎 google 的做法是，在该位置输入的唯一文本始终为空，即使您输入了一些文本。我不知道为什么会这样。
不，当你写了一些东西时它不是空的。证明：alert(document.getElementById("lst-ib").value);
另外，看看输入元素有什么颜色：<input id="lst-ib" class="gsfi" type="text" maxlength="2048" name="q" autocomplete="off" size="41" title="Sök" value="" dir="ltr" style="left: 0pt; border: medium none; padding: 0pt 0pt 0pt 2px; margin: 0pt; width: 100%; outline: medium none; top: 1px; overflow: hidden; background: url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D") repeat scroll 0% 0% transparent; position: absolute; z-index: 5; color: transparent;" spellcheck="false">。不是color: transparent;吗？
@some 显然谷歌为我们提供了两种不同的服务。要么这样，要么我真的需要睡觉。

【解决方案3】：

这实际上是文本，而不是图像。同样的问题得到了答案here。

另外，这里还有一个可以工作的小 sn-p (Javascript)：

<FORM action="http://www.domain.com" method="post">
<INPUT type="text" size="25" value="Enter Your Default Text Here" onFocus="if(this.value       == 'Enter Your Default Text Here') {this.value = '';}" onBlur="if (this.value == '')     {this.value = 'Enter Your Default Text Here';}" />
<INPUT type=submit value=Submit>
</FORM>

【讨论】：

这不是我在说的。这比简单的默认文本切换更复杂。它完成了幽灵文本中的单词。只需在搜索栏中输入“fac”，您就会看到它以幽灵文本中的“ebook”完成。
对不起，我的错。好吧，要使它起作用，您必须首先建立可能的字符串，然后使用@some 建议。

【解决方案4】：

不是图像，而是 div 标记中的文本。

您可以使用类似的 firebug och 来获取确切的代码，下面您会看到他们如何做到这一点的重要元素。当然你也需要一些javascript：

<div style="position: relative; width: 100%; height: 25px;">
<input type="text">
<div>goo</div>
<div>google</div>
</div>

(我输入goo，正如你在输入标签后的第一个div标签中看到的那样，他们把google作为第二个的建议。如果你看一下真实的代码，你会发现他们有不同的样式属性来获得不同的颜色。我删除了大部分，因为在答案中他们使用什么颜色并不重要）

【讨论】：