@联系人 效能，像微博或QQ空间回复那样， 求设计思路

@联系人 功能，像微博或QQ空间回复那样， 求设计思路
RT
最近公司的一个case, 不大，类似新浪微博，发帖子，里面可以包含文字、图片、视频等等，并有评论和回复评论功能，现在在加一功能，就是 @联系人 模糊匹配自动完成的功能，和新浪微博或QQ空间动态回复那样， 希望在匹配列表出来后，在 

<input type="text" />

<textarea></textarea>

里显示并高亮，就像下图

我现在做到根据@后面的关键字，显示匹配联系人列表，然后想用 js 去显示选中的某一项并让其高亮，卡住了，因为发现
input textarea 里的value值不能显示其他标签，所以下午研究了下QQ的， 发现上图中的输入框，是一个

<div contenteditable="true"><button>@王伟</button></div>

和我的设计差别很大，因为form表单提交和后台都已经好了，所以不想改页面标签的情况下，还是 input 和 textarea ，怎么实现上图中的功能
请大家提供个思路或建议，谢谢
------解决思路----------------------
首先提交的 表单 是你控制的
也就是 表单的值 是你赋予的

然后  用户看到的不一定是 表单 比如 textarea 你可以隐藏
用户看见的是一个  html编辑器 外面随便找一个 一个内容编辑器里面 可以控制格式化显示内容

提交之前吧 编辑器的内容 赋予textarea

------解决思路----------------------
要输入时显示高亮，只能用html 编辑器【div 设置可编辑】。

如果只要@ 功能。服务器 正则处理就可以
------解决思路----------------------
可以将textarea 改为iframe,并将其contenteditable属性设置为ture，这样里面的文本就可以实时设置样式了
------解决思路----------------------
 输入框 加按键事件，输入@ 符号后悬浮窗加载]联系人数据， 截取@符号后的输入提交服务器查询，更新悬浮窗联系人数据。
------解决思路----------------------
@的格式是你定的、比如百度的是@人名+空格、你只要监听输入框，只要有符合这个格式的然后把这个人名变个颜色、当然你的输入框可以为网上那些开源的编辑框、然后当用户点击提交时你先获取到编辑框内的值然后复制给你那个隐藏的textarea然后调用你的接口不就好了、这样只是改前台就好了。
------解决思路----------------------
textarea做容器变色不了，换web富文本编辑器吧。。如kindeditor。ueditor，ckeditor之类的