I have a long text field and what I want to do is that when a user types an '@' character a list of users appear just like a typical auto-complete. However I want the list of users to appear below the '@' character which could be 20-30 characters in from the start of the text box.

I've found many jQuery auto-complete plugins but none that position the list below the current caret position.

I can get the text field position using `$('#textfield').position()` and I can get the caret position using [something like this](https://stackoverflow.com/questions/1891444/how-can-i-get-cursor-position-in-a-textarea) but that gets the character index from the text value and not the pixel position.

How can I get the current carret position of a text field relative to the page in pixels in order to position an element below it?