title: How to position an element below a text box carret in javascript?
body: <p>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.</p>
  
  <p>I've found many jQuery auto-complete plugins but none that position the list below the current caret position.</p>
  
  <p>I can get the text field position using <code>$('#textfield').position()</code> and I can get the caret position using <a href="https://stackoverflow.com/questions/1891444/how-can-i-get-cursor-position-in-a-textarea">something like this</a> but that gets the character index from the text value and not the pixel position.</p>
  
  <p>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?</p>