[email protected]功能改进

最近一直在进行ThinkSNS二次开发,ThinkSNS的@功能暂时没有像新浪微博一样输入@之后出现可能存在的用户提示,选中某用户之后自动补齐名字和加上空格。第一想法,直接抠代码,围脖首页源码里翻了半天,实在找不出来…转而求其次,网上搜代码,一开始的想法是用Autocomplete来实现,但试用后发现并不合适,Autocomplete从输入内容的第一个字符开始识别,然后对比后端数据查找是否有匹配的,所以到最后发现,只能自己重新发开一下了。

使用jQuery和php实现,思路如下,前端使用jQuery捕获输入事件,把所有的输入内容用正则进行匹配,标记从后端开始往前匹配@,中间只匹配中文字母和下划线,如此就能捕抓到用户@的keyword,每多输入一个字符,触发一次事件,进行一次新的捕抓,使用Ajax向后端发送捕抓到的keyword。后端接收到前端发送过来的keyword,在数据库中对所有关注的用户进行搜索,把找到的结果用json返回到前端来,前端根据接收到的数据作出用户提示,用户选择相应的@对象后,自动补齐加空格。主要jQuery代码如下,自动向后端发送keyword,等待返回json。

$("#content_publish").keyup(function(){
    var reg = /@([a-zA-Z0-9_\u4e00-\u9fa5]+?)$/;
    var result = reg.exec($(this).attr("value"));
    $.getJSON("{:U('home/User/keyword')}",{
        'keyword': result[1]
    },function(json) {
        if(json.status == "successful") {
            $("#previewer").empty();
            $("#previewer").append("<ul>");
            for (i in json.data) {
                $("#previewer").append("<li>"+json.data[i].uname+"</li>");
            }
            $("#previewer").append("</ul>");
        }
        else {
            $("#previewer").empty();
            $("#previewer").append("<ul>");
            $("#previewer").append("<li>"+result[1]+"</li>");
            $("#previewer").append("</ul>");
        }
    });
});
$("#previewer li").live("click", function(){
    var reg = /^(.*)@([a-zA-Z0-9_\u4e00-\u9fa5]+?)$/;
    var result = reg.exec($("#content_publish").attr("value"));
    $("#content_publish").empty();
    $("#previewer").empty();
    $("#content_publish").val(result[1]+"@"+$(this).text()+" ");
    $("#content_publish").focus();
});

PHP代码就不放出来了,需要的自行编写。

Leave a Comment

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据