类似腾讯微博的@朋友机制是怎么实现的

Question

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

Answer 1

應該是分兩個步驟來做的,首先正則得到所有的用戶名,然後查詢數據庫
1.正則匹配得到用戶名,把結果賦值給數組
\@.*{2}
2.先拆分數組,然後逐一匹配查詢數據庫.
select username form 表 where username like '{$拆分array後的單個用戶名}%'
如果能夠查到就@,查不到就Continue;

Answer 2

@正则已经写出来了<textarea id="content"></textarea>
<input type="button" class="send_button" onclick="publish();" value="发 布">$('#content').keyup(function(){
    var content = $('#content').val();
    show_at_list(content);
});function show_at_list(content)
{  
    var reg = /\@[^\s|\@]*$/ 
    var str = content.match(reg);
    if (str != null)
    {   
        var k = str[0].replace("@", "");
        get_idols_list(k);
    }
    else
    {
        $('#at').hide();
    }
}// 获取关注列表
function get_idols_list(k)
{   
    var idols = '';
    
    $.get(SITE_URL + 'member/idols', {"uid":uid, "k":k}, function(response){
        $.each(response, function(key, rows) {
            idols +=  '<li><a href="javascript:;" onclick="at_friend('+rows['uid']+', \''+rows['nickname']+'\')">'+rows['nickname']+'('+rows['username']+')</a></li>'
        });
        if (idols)
        {  
            $('#friend_list').html(idols);
            $('#at').show();
        }
        else
        {
            $('#at').hide();
        }  
        
    }, "json");
}// @朋友
function at_friend(at_uid, at_name)
{   
    at_name = at_name.replace(/<[^>].*?>/g, "");
    var txt = '@' + at_name + ' ';
    
    // 去掉搜索关键词
    var old_content = $('#content').val(); 
    var arr = old_content.split('@');
    arr.pop();
    var new_content = arr.join('@');
    $('#content').val(new_content);
    
    var obj = $("#content")[0];
    var position = get_cursor_position(obj);
    
    insert_txt(obj, txt, position);
    $('#at').hide();
}现在问题是：如何控制朋友列表的位置，怎么根据的光标的位置来确定列表的位置

Answer 3

 <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键啊，退格键，删除键。

Answer 4

$(document).ready(function () {
  var emailInput = $("#email");  
这写乱了，脑袋有点蒙，当email写了。
var emailInput = $("#content"); 

Answer 5

光標位置這是js的部份,不是php的部份,給你提一個思路吧
用js獲取對象的Position值就行了.