微博的at功能前端实现

微博上有一个@功能,就是你在输入@符号之后,会在@的位置出现一个下拉单,然后选择完就会在@后面补全。

怎样实现它?思考之后关键的问题在于要实现这个下拉单出现在@的下方。

问题:对,textarea我只能取到@字符的位置,比如是在第12个字符,而不能取到@这个字符相对textarea左上角的xy坐标。

解决思路:把textarea的内容复制到一个与textarea样式完全相同的div容器中。然后就能定位到@的偏移位置了。

github已经实现的代码:At.js

At.js实现了简单的@功能,但BT的需求来了。
微博的@username发出后,然后对应的人可以收到一个通知。那是因为我可以通过正则匹配出username,然后给这个username发一个通知。如果username是重复的怎么办?就比如说,新浪把用户的姓名作为用户名,当然每个用户名都有一个数字id与之对应(普通用户当然不会记数字id)。我要怎么做@呢?

案例:Facebook的编辑框就解决了这个问题。
核心原理:新浪保存到数据库里的是比如“你好@username”这样的字串。而Facebook保存到数据库里的是“你好@[username:123456]”这样的字串。
于是这个JS做起来就小痛苦了,痛苦之处在于用户是在编辑框里不断地修改的,可以选中一段,或是回退之类。此时如何保证@[username:123456]的正确性就是一大考验。

Facebook是神人,当然代码压缩过了没法看出原理。
感谢开源,我找到了这个方案:jquery.mentionsInput
但jquery.mentionInput也不是完美的,它实现了Facebook style的at,也就是用户名统一列在编辑框的下方。

不过修改一下就可以把autocomplete的位置重新定位了。就是相对完美的方案了。

Copyright © 2012. All Rights Reserved.

《微博的at功能前端实现》有8个想法

    1. 没接触太多的国外程序猿。但就我接触的厦门程序猿来说,弱点是底子普遍不太好、心态浮。优点是经过培训和指点还是能找到路线的。
      不过数学、英语不好,挺大程度限制了他们在这条路上长远地发展。

  1. 想问一下,At.js如何请求ajax数据,请求的json数据要求是什么格式的?我怎么试了一天没没成功?谢谢

  2. 为什么把textarea的内容复制到一个与textarea样式完全相同的div容器中,就能定位到@的偏移位置了。

    没说清楚呀?

    1. 原理是这样的:每个keyup的时候,判断如果输入的是@,那么就取得当前光标的偏移量,然后把@前的字符复制到一个div里去。这个div的显示样式要和textarea的一样。然后在textarea里添加一个@,然后取$(‘#currentPosition’)的位置就取到了。
      具体的还是建议看at.js。如果练手的话,也可以自己写过一遍。

发表评论

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