Autocomplete textarea text after click result on l

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.

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>