Building IntelliSense/AutoComplete in JavaScript

Question

I currently maintain an add-on for Firefox that adds a number of capabilities to a forum web site that implements its own markup language, similar to what stackoverflow provides with "Markdown."

I have built an IntelliSense function for this add-on, which, similar to Visual Studio, will pop up an auto-suggest when typing this markup in a textarea. Example:

http://members.lycos.co.uk/suffusion/namfox/faq-1.5/autocomplete-example-2-1.jpg

The hardest thing about the implementation is finding the (x,y) coordinates of a key press in a textarea so I can pop-up the IntelliSense window very close to it. The keypress events in JavaScript do not expose these coordinates, so I've had to work around this. Unfortunately I could only find a cross-browser compatible way of getting the y-coordinate, not the x-coordinate. The code for this is located here in the _getPopupPoint function.

This works for Firefox because I use some of Mozilla's XPCOM interfaces to get the coordinate. So while this works for Firefox, now that I want to port my add-on to Google Chrome, I couldn't find a way to get the coordinates.

So what I'm asking is twofold: (1) Is there a better way to get the x-coordinate of a key press? (2) If not, is there anything I can do in the context of a Google Chrome add-on to get the same data?

Answer 1

The window.getSelection and related methods might be what you're looking for. You can calculate the screen position of the caret using the offset etc functions.