Как отобразить прокомментированный список пользователей, когда пользователь вводит текстовое поле @ key - PullRequest
Новая
       43

Как отобразить прокомментированный список пользователей, когда пользователь вводит текстовое поле @ key

0 голосов
/ 12 июня 2019

Как отобразить закомментированный список пользователей, когда пользователь вводит текст в поле @ keyin textarea, отвечая на любое конкретное сообщение в Messanger / Messages

1 Ответ

1 голос
/ 12 июня 2019

Я пишу этот код 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")
...