ThinkSNS@功能改进

最近一直在进行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 Cancel reply