Question

I’m about to embark in creating a Jquery plugin that will provide a type ahead lookup in a similar way to how it’s presented in visual studio.

Whilst I’m familiar to autocomplete and other similar type ahead plugins I want to make it so that the pop up is positioned under the word that’s being typed in a text area.

Is there a way to get the current x and y of the caret within a text box?

Thanks

Sam

Answer 1

There is a complex solution which involves overlaying the input with a canvas element and measuring the text in that (or just having a hidden canvas element) – but this I don’t think will work in older IE.

You can measure the width of the text by adding up the characters and their relative width (with a known width mono font). Then just grabbing the input’s top/left and adding the charWidth * num of chars prior to the word (including whitespace) should give you an somewhat accurate ‘top/left’ of the end (or beginning if you make it this way) of the word.

If you need a coded example let me know and I can whip up something suitable. However this (imo) would be the easiest way to do this (mono font + calculating widths + input offsets)