这是你想要的 @ 某人的功能

是时候给博客加个新功能了,比如@某人 。
这个功能应该说在回复中使用比较多。比如这样的。
file

显示效果就是这样的
file

这是我在本地随便发的几条评论,从这个评论里,你可以清楚的看到每一条回复是回复给谁的,当然,@谁就是回复给谁。
ok,我们现在开工吧,。

准备

要做某一个功能前,程序员最喜欢的是 百度、谷歌、github,果然,github 上已经有很多人帮我们实现了,虽然 github 被微软收购了,很多人吵着要逃离 github,我就不明白了,你一天吃着20块不到的午餐,操心别人上百亿的生意干嘛?
废话真多,总之,我找到了它 ichord/At.js, 这里 可以查看例子,效果不错。我们只需要三个文件就可以了。
css : https://github.com/ichord/At.js/raw/master/dist/css/jquery.atwho.min.css
js :https://github.com/ichord/At.js/raw/master/dist/js/jquery.atwho.min.js
js:https://github.com/ichord/Caret.js/raw/master/dist/jquery.caret.min.js

当然,你可以把他们下载到本地再引入到模板文件里就OK了。

测试功能

文档给了一个很简单的例子

<link href="css/jquery.atwho.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/jquery.caret.js"></script>
<script src="js/jquery.atwho.js"></script>
$('#inputor').atwho({
    at: "@",
    data:['Peter', 'Tom', 'Anne']
})

这里的前提是你要有一个 textarea 或者 input
看效果
file

效果就出来了。

实现

大概的样式出来了,剩下的就是实现功能了,
js文件

$('#inputor').atwho({
  at: "@",
  callbacks: {
    remoteFilter: function(query, callback) {
      $.getJSON("/usersjson", {q: query}, function(data) {
        callback(data)
      });
    }
  }
});

这里使用了callbacks下的 remoteFilter,也就是从远程获取数组给到jsjs会自动把他显示到弹窗里。但是这里要注意,远程返回的是json格式。
routes/web.php

Route::get('usersjson','UsersController@usersjson')->name('users.json');

app/Http/Controllers/UsersController.php

public function usersjson(Request $request)
    {
        $name = $request->q;
        $users  =User::where('name','like',$name."%")->pluck('name')->toArray();
        return response()->json($users);
    }

这里我只是简单写了个功能,具体实现逻辑可根据你的需求进行更改。
看下效果
file

现在所有功能就算实现了。

PS

这里只是简单的介绍了一下使用方法。你可以进行扩展,

比如某用户@过的用户名数组可以在本地和后台都存上一份,这样直接从缓存中读取速度要快得多。
比如在发送回复后,给@的某人发送消息提醒或是邮件通知等等。

更多功能等你实现。

有好的想法请留言给我。

有同学问我具体实现,可以直接去看我的博客源码,虽然代码很烂,但也要记得Star!
github:https://github.com/jourdon/qiehe

作者: Jourdon
本文地址: https://www.qiehe.net/posts/7/this-is-what-you-want-at-someones-function
转载请注明出处!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
file

本文章首发在 Laravel China 社区

Good Good Study , Day Day Up!!