Type @, Show A Name List Like Facebook Status Box

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 'di

Solution 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.

Solution 2:

I'm sure Facebook uses an element with contenteditable because the hyperlink appears inline when you type it.

Alternatively, if you don't want to format the name, you could create a new element with the exact same font CSS properties, measure the offset and make the dropdown element appear at the same offset to the textarea.