类似腾讯微博的@朋友机制是如何实现的

类似腾讯微博的@朋友机制是怎么实现的
怎么实现@后显示朋友列表，@abc 这样怎么实现搜索的，我觉得应该用正则来写，可是不知道怎么写？望高手指教

[解决办法]
<td><textarea id="content"></textarea>
下边加一下这个<div id="auto-show">
</div></td>

<style type="text/css" mce_bogus="1"> #content
{
width: 200px;
}
.autoDiv
{
visibility: hidden;
position: absolute;
width: 200px;
height: 255px;
border: 1px solid #00f;
background-color: White;
}
</style>
<script language="javascript">
//自动显示
function autoShow() {
var obj = document.getElementById("content");
var mailAddressList = document.getElementById("auto-show");
var x = 0, y = 0, o = obj; h = obj.offsetHeight;
while (o != null) {
x += o.offsetLeft;
y += o.offsetTop;
o = o.offsetParent;
}
mailAddressList.style.left = x + 'px';
mailAddressList.style.top = y + h + 'px';
mailAddressList.style.visibility = "visible";
}
$(document).ready(function () {
var emailInput = $("#email"); 
var emailListDiv = $("#auto-show");
//bind focus event(获得焦点，我假设成了文本框，你的这个情况是@)
emailInput.keydown(autoShow);

emailListDiv.addClass("autoDiv");
//bind the events:mouseover、mouseout for the div
for (var i = 0; i < @出来的List长度.length; i++) {
$("#auto-show").append("<div id='" + (i + 1).toString() + "' onmouseover='setStyle(this)自己写你的样式' onmouseout='cancelStyle(this)自己写你的样式' >" + @出来的list[i] + "</div>");
}
</script>
没给你写鼠标移入设置样式，鼠标移出取消样式，按上下键设置样式，键盘弹出事件处理，回车键啊，Esc键啊，退格键，删除键。