3

You know how google instant, when they provide suggestions, the bit of the search field that they suggested turns grey, but the bit you typed is always black. Well I want to achieve the same effect with a similar system. How would I go about this?

Thanks, Fela

Fela Maslen
  • 2,022
  • 3
  • 25
  • 46
  • are you referring to the dropdown list of google search suggestions or the textbox we are typing in. can you provide some snapshots? – Sujit Agarwal Mar 21 '11 at 11:29
  • Exelian, sorry about that, Coding-Freak, I was referring to the text box, but I think the problem's solved now :) – Fela Maslen Mar 21 '11 at 11:43
  • See [this question](http://stackoverflow.com/questions/4663710/how-do-i-implement-autocomplete-without-using-a-dropdownlist) and the associated [jsfiddle](http://jsfiddle.net/cZb9r/3/), that looks like exactly what you need. – Town Mar 21 '11 at 11:28
  • thanks, I'll try that if the grey background input doesn't work. Cheers! – Fela Maslen Mar 21 '11 at 11:44
  • It uses exactly the same method as Curt suggested, so it'll definitely work :) – Town Mar 21 '11 at 12:03

3 Answers3

3

You will need 2 textboxes positioned on top of each other. Make the textbox on top have a transparent background (these will be the selectable textbox). Then set the color of the textbox behind to grey (this will be the textbox displaying the suggestion).

Curtis
  • 101,612
  • 66
  • 270
  • 352
0

You don't, If you look closely to the Google Instant, you'll see that they have a element positioned exactly where the inputbox is. So to make it simple: Just position a div where your inputfield is. Then like so:

<div>
<span class="originaltext">hello</span>
</span class="suggested">world</span>
</div>
Bart Vangeneugden
  • 3,436
  • 4
  • 33
  • 52
0

You can start with a grey background-image and adjusting its background-position property

Mithun Sreedharan
  • 49,883
  • 70
  • 181
  • 236