when you start to type something familiar in the search bar, it will finish it in ghost text. since the text is non highlight-able i'm guessing it's a generated and positioned background image. Does anyone know how they actually do it? i want to build something like it.

when you start to type something familiar in the search bar, it will finish it in ghost text. since the text is non highlight-able i'm guessing it's a generated and positioned background image. Does anyone know how they actually do it? i want to build something like it.

• javascript
• html
• css

Share Improve this question Follow asked Feb 17, 2012 at 9:06 Emery KingEmery King 3,5342626 silver badges3434 bronze badges 3

• its not image, its text only... and its a suggestion/auto plete kinda thing – Pal Singh Commented Feb 17, 2012 at 9:09
• I am aware of what it is. how are you certain it's text and not an image? – Emery King Commented Feb 17, 2012 at 9:13
• I am certain that it IS text because I have looked at the code. – some Commented Feb 17, 2012 at 9:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

here's how google did it:

behind the transparent input box is a div containing the typed letters as well as a container with the "ghost" word. all of them are meticulously aligned so that the typed letters perfectly hide the letters of the "ghost word".

It's text. There are several divs in the same position. The text you enter and the grey autosuggest text are in two separate divs.

There's a text input there too, but it has no value while you're entering text. I assume it's populated with javascript at some point if needed.

Anyway, you can confirm this by typing a few letters in the search box, right clicking, hitting "inspect element," and poking around a bit in the DOM inspector.

My interpretation of what's going on is this:

1. You type in a textbox

2. The textbox is immediately cleared and whatever you typed there is placed in the "black" div

3. The autosuggest routine takes place, and the "grey" div is filled with the rest of the word being suggested.

That is actually text, not image. The same question got answer here.

Also, here is another little snippet (Javascript) that works:

<FORM action="http://www.domain." 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>

Not an image, but text in a div-tag.

You can use firebug och similar to get the exact code, below you see the important elements of how they do it. Of course you need some javascript too:

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

( I entered goo as you see in the first div-tag after the input-tag, and they put google as a suggestion in the second one. If you look at the real code you see that they have different style-attributes to get the different colors. I removed much of it because it wasn't important in the answer exactly what colors they where using)