单击列表jquery上的结果后自动完成textarea文本

问题描述

我正在为用户创建文本区域以创建帖子。在这些帖子中，他们可以标记某人 @myfriend 。我在@NiMusco的帮助下成功开发了jquery代码，但是在单击其中一个结果后自动完成时遇到了麻烦，例如替换 @Jean （列出的结果）由在文本区域内撰写的 @Je 表示。

I'm making a textarea for users to create posts. In those posts they have the possibility to tag someone @myfriend. I successfully with @NiMusco help, developed the jquery code, but what I'm getting into trouble at the moment of autocompleting after clicking one of the results, for example replace @Jean (listed result) by @Je written within the textarea.

  <textarea id=inline_search></textarea>
   <div >
       <ul id=show_inline_users>
       </ul>
  </div>

php输出json数据，这种类型

The php outputs json data, this type

$arr[] = array("channel" => $obj->channel,...);

/* Return JSON */
echo json_encode($arr);

Jquery是正确的，但是我不能自动完成用户名

the Jquery is correct, but I just cant autocomplete the user name

var count = 0;
var tagging = false;

$('#inline_search').keyup(function(){
    var text = $(this).val();

    if(text.length > count){
        var lastChar = text.substr(count);

       if(lastChar == "@"){
          tagging = true;
       }

      //White space break the tagging.
      if(lastChar == " "){
       tagging = false;
       }

    //Adapt this to your tagging function
     if(tagging == true){
       var username = text.substr(text.lastIndexOf('@') + 1, text.length);

   ////////////INLINE SEARCH INI///////////////////////////////////////
   var searchKeyword = username;
       if(searchKeyword.length>0){
      $.post('search/users.php', { keywords: searchKeyword },
    function(data) {
      $('#show_inline_users').empty();
     $.each(data, function() {

$('#show_inline_users').append("<li class=opt title='"+this.channel+"' >"+this.channel+"</li>");

        /*$('.opt').click(function(){
         var user_title = $(this).attr("title");
          alert(user_title);


          $('#inline_search').val($('#inline_search').val()+ " @"+user_title);
         });*/



        });
        },"json").fail(function(xhr, ajaxOptions, thrownError) { //any errors?
                alert(thrownError); //alert with HTTP error
            });
     }else{$('#show_inline_users').empty();}

   ///////////////INLINE SEARCH END//////////////////////////////////////

     }
   }

   count = text.length;
  });

我在这些行上有问题，我想使用 .attr（） 替换

I have problem on those lines, I thought to use .attr() to replace

 $('#show_inline_users').append("<li class=opt title='"+this.channel+"' >"+this.channel+"</li>");

       /*$('.opt').click(function(){
     var user_title = $(this).attr("title");
      alert(user_title);

      $('#inline_search').val($('#inline_search').val()+ " @"+user_title);
     });*/


     });*/

例如，如果我输入我在stackoverflow上的用户名是@Je ，在文本区域内，出现了用户建议列表

For example if I type Hi my username on stackoverflow is @Je within the textarea, there appear a list of users suggestions

 <ul id=show_inline_users>
      <li class=opt title='Jenna'>Jenna</li>
        <li class=opt title='Jeremy'>Jeremy</li>
           <li class=opt title='Jean'>Jean</li>
                <li class=opt title='Jelly'>Jelly</li>
     </ul>

如果我单击Jean Option，则标题值将替换文本区域内的用户文本，例如twitter或faceb0ok。

If I click on Jean Option, the title value replaces the user text within the textarea like in twitter or faceb0ok.

推荐答案

不好意思，抱歉。请记住，标签菜单仅在@之后出现。而且我们在这里的最后一个位置是 @：text.lastIndexOf（’@’）。

Well, sorry for the delay. Remember that the tag menu only appears after a @. And we have the last position of "@" here: text.lastIndexOf('@').

类似这样的东西（但要适应您的情况）。
尝试单击其他名称。

Something like this (but adapted to what you have).Try clicking different names.

var text = $('#post').val();
var at_pos = text.lastIndexOf('@');

$('.opt').click(function(){
    var username = $(this).attr("title");
    text = text.substring(0, at_pos);
    text = text + username;
    $('#post').val(text);
});

#post{
width:300px;
height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="post">
   Im gonna tag @Je
</textarea>

<ul id=show_inline_users>
  <li class=opt title='Jenna'>Jenna</li>
  <li class=opt title='Jeremy'>Jeremy</li>
  <li class=opt title='Jean'>Jean</li>
  <li class=opt title='Jelly'>Jelly</li>
</ul>

这篇关于单击列表jquery上的结果后自动完成textarea文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！