这是你想要的 @ 某人的功能
是时候给博客加个新功能了,比如@某人 。
这个功能应该说在回复中使用比较多。比如这样的。
显示效果就是这样的
这是我在本地随便发的几条评论,从这个评论里,你可以清楚的看到每一条回复是回复给谁的,当然,@谁就是回复给谁。
ok,我们现在开工吧,。
准备
要做某一个功能前,程序员最喜欢的是 百度、谷歌、github
,果然,github
上已经有很多人帮我们实现了,虽然 github
被微软收购了,很多人吵着要逃离 github
,我就不明白了,你一天吃着20块不到的午餐,操心别人上百亿的生意干嘛?
废话真多,总之,我找到了它 ichord/At.js, 这里 可以查看例子,效果不错。我们只需要三个文件就可以了。
css : https://github.com/ichord/At.js/raw/master...
js :https://github.com/ichord/At.js/raw/master...
js:https://github.com/ichord/Caret.js/raw/mas...
当然,你可以把他们下载到本地再引入到模板文件里就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
看效果
效果就出来了。
实现
大概的样式出来了,剩下的就是实现功能了,js
文件
$('#inputor').atwho({
at: "@",
callbacks: {
remoteFilter: function(query, callback) {
$.getJSON("/usersjson", {q: query}, function(data) {
callback(data)
});
}
}
});
这里使用了callbacks
下的 remoteFilter
,也就是从远程获取数组给到js
,js
会自动把他显示到弹窗里。但是这里要注意,远程返回的是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);
}
这里我只是简单写了个功能,具体实现逻辑可根据你的需求进行更改。
看下效果
现在所有功能就算实现了。
PS
这里只是简单的介绍了一下使用方法。你可以进行扩展,
比如某用户@过的用户名数组可以在本地和后台都存上一份,这样直接从缓存中读取速度要快得多。
比如在发送回复后,给@的某人发送消息提醒或是邮件通知等等。
更多功能等你实现。
有好的想法请留言给我。
有同学问我具体实现,可以直接去看我的博客源码,虽然代码很烂,但也要记得Star!
github:https://github.com/jourdon/qiehe
作者: Jourdon
本文地址: https://www.qiehe.net/posts/7/this-is-what...
转载请注明出处!
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: