php - 当用户在@ key textarea字段中键入时如何显示评论用户的列表
问题描述
如何在用户键入 @keyin textarea 字段时显示评论用户列表,同时回复 Messanger/Messages 中的任何特定消息
解决方案
我写这个 jquery 代码来获取列表
$(document).on('keypress', '#comment_input', function(event){
if(event.which == 64) {
var elems = document.getElementsByClassName("usrcmt__name");
var arr = jQuery.makeArray(elems);
var namelist = {};
var namelisttag ='<ul>';
$.each(arr, function(index, value) {
namelist[value.innerText] = value.innerText;
});
$.each(namelist, function(index, name) {
namelisttag+='<li>'+name+'</li>';
});
namelisttag+='</ul></div>';
$('.tribute-container').css({'top':'5px','left':'10px','position':'absolute','z-index':'9999','display':'block'}).html(namelisttag);
}
}); //reply approve end
//when click on delete or backspace btn delete list
$(document).on('keydown', '#comment_input', function(event){
var key = event.keyCode || event.charCode;
if(key == 8 || key == 46) {
$('.tribute-container ul').remove();
}
});
//when click on user , append user name in text area
$(document).on('click', '.tribute-container ul li', function(event){
var currentVal = $('#comment_input').val();
$('#comment_input').val(currentVal +$(this).text()+' ');
$('.tribute-container ul').remove();
});
==================================================== ==========
html代码
<textarea id="comment_input"></textarea>
<div class="tribute-container"></div>
<div class="comments_list">
<div class="comment">
<div class="usrcmt__name"> users1 users1 </div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>
<div class="comment">
<div class="usrcmt__name"> users1 users1 </div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>
<div class="comment">
<div class="usrcmt__name"> users2 users2 </div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>
<div class="comment">
<div class="usrcmt__name"> users1 users1 </div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>
<div class="comment">
<div class="usrcmt__name"> users3 users3 </div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>
<div class="comment">
<div class="usrcmt__name"> users2 users2 </div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>
</div>
==================================================== == style.css 一些风格
.tribute-container li{
list-style:none;
cursor:pointer;
}
.tribute-container li:hover{
background:#328af1;
color:#fff;
cursor:pointer;
}
textarea {
margin-bottom:40px;
}
Check this link for your answer [here](https://jsfiddle.net/DineshBW/zun7avLs "jsfiddle link")
推荐阅读
- jquery - laravel sweetalert2 Uncaught TypeError:无法将类作为函数调用
- flutter - 如何在共享扩展中获取 shared_preferences
- angular - 错误 TS2694:命名空间 r3_symbols 没有导出成员 'ɵɵFactoryDef'
- c# - Apache 使用泛型的过滤器或谓词条件点燃 loadCache()
- php - 使用 mpdf 将 Google 图表导出为 PDF 的问题
- reactjs - 如何在没有 forwardedRef 的情况下使用 typescript 在 React hoc 中创建 ref
- scala - SciSpark:从本地文件夹而不是 HDFS 文件夹读取
- vim - 在 python 函数中搜索变量(不在文件中):vim
- laravel - 如何在 GCP Flex 环境中设置 websocket?
- java - 为什么我的查询返回列表中至少包含一个参数的所有项目,而不是列表中包含所有参数的参数?