当用户在@ key textarea字段中键入时如何显示评论用户的列表

Question

当用户在回复 Messanger/Messages 中的任何特定消息时在@keyin textarea 字段中键入时如何显示评论用户的列表

Answer 1

我写这个 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")