最近一直在进行ThinkSNS二次开发，ThinkSNS的@功能暂时没有像新浪微博一样输入@之后出现可能存在的用户提示，选中某用户之后自动补齐名字和加上空格。第一想法，直接抠代码，围脖首页源码里翻了半天，实在找不出来…转而求其次，网上搜代码，一开始的想法是用Autocomplete来实现，但试用后发现并不合适，Autocomplete从输入内容的第一个字符开始识别，然后对比后端数据查找是否有匹配的，所以到最后发现，只能自己重新发开一下了。
使用jQuery和php实现，思路如下，前端使用jQuery捕获输入事件，把所有的输入内容用正则进行匹配，标记从后端开始往前匹配@，中间只匹配中文字母和下划线，如此就能捕抓到用户@的keyword，每多输入一个字符，触发一次事件，进行一次新的捕抓，使用Ajax向后端发送捕抓到的keyword。后端接收到前端发送过来的keyword，在数据库中对所有关注的用户进行搜索，把找到的结果用json返回到前端来，前端根据接收到的数据作出用户提示，用户选择相应的@对象后，自动补齐加空格。主要jQuery代码如下，自动向后端发送keyword，等待返回json。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$("#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代码就不放出来了，需要的自行编写。
