Google Instant text field

Question

You know how when you start typing in Instant, the suggestions for words you want start to come up, and the #1 suggestion is some grey text beside the word? That is what I am interested in trying to mimic (in javascript, prefer), but for text fields and text areas.

I thought about getting the x and y coordinates of the current caret position, and placing the grey text there. However, I'm not sure if this is the best option, because if I want to place that grey text in the middle of a sentence, or what have you, then the rest of the text would have to be shifted over to make room. Not to mention the fact that I haven't yet found a good way to even get the x and y coordinates of the caret in a textfield or textarea. For these reasons, this option just seems inefficient.

Also, the code can not be the same or near the same as what Google has. One additional feature I want is having the grey text appear in the middle of sentences, which Google's code doesn't support. So, that would need to be included in the solution.

Does anyone have an idea (or some code) of how to achieve this? I have been pondering this for a while and haven't really gotten anywhere.

Thanks!

Answer 1

JQuery has a wonderful autocomplete plugin.