javascript - Google 検索でのフェード テキスト効果はどのように機能しますか?

Question

Google で検索すると、他の多くのサイトと同様に、オートコンプリートの結果が下に表示されます。

ただし、それとは別に、カーソルの位置を変更せずに入力ボックス自体に表示される、最も可能性の高い検索クエリの色あせたテキスト オートコンプリートがあります。添付のスクリーンショットを参照してください。コンソールを確認しましたが、有用なものは何もありませんでした。

そのような効果はどのように達成されますか？

Answer 1

Googleは、「アクティブな」要素のすぐ後ろにスタックされている別のinput要素の値を設定することによってそれを行います。ソースを見ると、同じ場所にいくつかの要素があることがわかります。

<div id="gs_lc0" style="position: relative;">
    <input id="gbqfq" class="gbqfif" name="q" type="text" autocomplete="off" value="" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;" dir="ltr" spellcheck="false">
    <div class="gbqfif" style="background-color: transparent; color: transparent; padding: 0px; position: absolute; z-index: 2; white-space: pre; visibility: hidden; background-position: initial initial; background-repeat: initial initial;" id="gs_sc0"></div>
    <input class="gbqfif" disabled="" autocomplete="off" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px;" id="gs_taif0" dir="ltr">
    <input class="gbqfif" disabled="" autocomplete="off" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px; visibility: hidden;" id="gs_htif0" dir="ltr">
</div>

<input>灰色で表示された提案テキストを処理しているように見えるのは2番目です。

Answer 2

これは、2つの入力とCSSプロパティによって行われますposition: absolute。1つの入力は黒色で現在のユーザー入力を含み、2番目の入力は灰色で最初の入力の下にあります。

そのためのCSSは次のようになります。

input.user-input {
    position: absolute;
    background: transparent;
    color: #000;
    z-index: 2
}
input.suggest-input {
    position: absolute;
    color: #ccc;
    z-index: 1
}