Autocomplete textarea text after click result on list jquery

Question

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>

The php outputs json data, this type

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

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

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;
  });

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);
     });*/


     });*/

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>

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

Answer 1

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>