javascript - type @, show a name list like facebook status box

Question

in facebook status box, if you type '@', then a list of friends' names appear. I am trying to implement such a status box.

But the problems are:

On typing '@', where should the 'div's location be and how to show the list? I just can't make anything out of it.

I went through this question of SOF, but that actually does not discuss that.

Anybody there to shed light on it as much as possible?

My choice is jquery.

Answer 1

From a quick glance at facebook, it appears that there is a <div> tag that renders the highlighted content along side the text content.

The text is captured one keystroke at a time by onKeyUp events on the <textarea> element (transparent and overlayed on top of the div with the visible content) and transposed into the <div> element. When examining the key up events, simply check if the key is '@' and fire the menu event.