CODEWITHSUNDEEP
javascriptautocompletegoogle-chromeintellisensefirefox-addon
David DeWinter
David DeWinter

Reputation: 131

Building IntelliSense/AutoComplete in JavaScript

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?

Upvotes: 6

Views: 1767

Answers (2)

jonchang
jonchang

Reputation: 1544

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.

Upvotes: 1

Shailesh Kumar
Shailesh Kumar

Reputation: 6967

It coculd be interesting to checkout the implementation of event object in DOJO toolkit.

Dojo provides the following attributes with an event object:

  • event.target - the element that generated the event
  • event.currentTarget - the current target
  • event.layerX - the x coordinate, relative to the event.currentTarget
  • event.layerY - the y coordinate, relative to the event.currentTarget
  • event.pageX - the x coordinate, relative to the view port
  • event.pageY - the y coordinate, relative to the view port
  • event.relatedTarget - For onmouseover and onmouseout, the object that the mouse pointer is moving to or out of
  • event.charCode - For keypress events, the character code of the key pressed
  • event.keyCode - for keypress events, handles special keys like ENTER and spacebar.
  • event.charOrCode - a normalized version of charCode and keyCode, which can be used for direct comparison for alpha keys and special keys together. (added in 1.1)

Upvotes: 0

Related Questions