Typeahead的灰色输入提示是如何实现的？

Question

我想实现这种灰色暗示效果。

但是，当我尝试检查这些元素时，键入前导失去焦点并且提示消失，这使得很难看到这里发生了什么。

基本上，他们有类似的东西

<input class="tt-hint">
<input class="tt-input">
<pre>col</pre>

我似乎无法通过在DOM树中搜索“orado”找到任何东西。我也没有在这三个元素的样式中找到它。

有人可以通过在jsFiddle上编写示例来说明这种效果是如何实现的吗？谢谢！

Answer 1

input.tt-hint的值设置为预先输入建议。它没有被插入到DOM中，而是设置它的.val()。

诀窍是input.tt-hint是透明的，只读的，并且位于实际输入上方。这是灰色位，typeahead.css:136将灰色定义为.twitter-typeahead .tt-hint {color: #999999;}。

同时，有<pre>设置为用户输入的值，放在input.tt-hint上方，以显示原始颜色。那个实际上放在DOM中，如果你检查元素，你会发现，在上面的例子中，“col”。

我最好的建议是，在将来，你应该检查元素，使它成为可以在同一个屏幕上看到代码中的元素和渲染的输入。然后你可以开始输入，看看有什么变化。