效果图片：
<style type="text/css"> #b { 500px; height: 200px; } #talkPop { position: absolute; z-index: 9; } .commonType_F7F7F7 { background-color: #FFFFFF; border: 1px solid #CBCBCB; } .commonType_F7F7F7 .trigon { background: url("Images/Box.png") no-repeat scroll 0 -76px transparent; height: 12px; position: absolute; top: -12px; 22px; } .MLeft_17 { margin-left: 17px; } .font12 { font-size: 12px !important; } .color666 { color: #666666; } .at-list { background: none repeat scroll 0 0 #FFFFFF; border-top: 1px solid #E0E0E0; display: block; max-height: 200px; overflow-y: scroll; } .clearBoth { clear: both; } ul, li, dl, dt, dd, ol { list-style: none outside none; } .at-list li { line-height: 24px; padding: 0 7px; } .at-list li a { display: block; } a:link, a:visited { text-decoration: none; } a { color: #0087C0; outline: medium none; } </style>
jquery Code:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#talkPop").hide(); //首先把弹出层隐藏掉
$("#atuser").click(function () {//点名被点击时触发
var $atuseroOffset = $("#atuser").offset(); //获得点名的位置
$("#talkPop").css("left", $atuseroOffset.left - 5); //把点名的左边所在位置-5赋给弹出层的左边应该所在位置下面+30是一样的道理，这里主是调整弹出层向上的方向头指上点名，如果你觉得-5不合适，自己调节吧。
$("#talkPop").css("top", $atuseroOffset.top + 30);
$("#talkPop").slideToggle("slow", function () { //点击奇数次显示，偶数次隐藏，“slow”慢慢显示或隐藏
});
});
$("#atList>li>a").click(function () {//点击弹出层里的li
var $name = $(this).text(); //获得被点击的li的里的文本
var $contents = $("#contents");
if ($contents.val().indexOf($name) < 0) {//判断选中的这个是否已经存在了。
$("#contents").append("<a href=\"javascript:void(0);\">@" + $name + " </a>");
$("#contents").focus();
return false; //如果没有return false;那么选中追夢，就会跳到追夢博客园的首面去了。
}
});
});
</script>
<body>
<div id="b">
<textarea id="contents" cols="3" rows="45" style=" 300px; height: 100px;"></textarea>
</div>
<div style="margin-left: 200px">
<a href="javascript:void(0);" id="atuser">点名</a></div>
<div id="talkPop">
<div id="atTips" class="commonType_F7F7F7 dialogs" style=" 200px; z-index: 100;">
<div class="trigon MLeft_17">
</div>
<div class="font12 color666" style="text-align: center; height: 30px; line-height: 30px;">
输入姓名后请轻敲空格完成输入</div>
<ul id="atList" class="at-list clearBoth" style="height: 200px; overflow-y: auto;">
<li><a href="http://www.cnblogs.com/koeltp">追夢</a></li>
<li><a href="http://www.cnblogs.com/">博客园</a></li>
<li><a href="javascript:void(0);">胡子大哥</a></li>
<li><a href="javascript:void(0);">灭掉日本</a></li>
<li><a href="javascript:void(0);">日本鬼子</a></li>
<li><a href="javascript:void(0);">钓鱼岛</a></li>
</ul>
</div>
</div>
</body>