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

Question

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

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

php输出json数据，此类型

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

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

Jquery 是正确的，但我无法自动完成用户名

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() 来代替

 $('#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);
     });*/


     });*/

例如，如果我在文本区域内键入 Hi my username on Whosebug is @Je，则会出现一个用户建议列表

 <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 中一样。

Answer 1

好吧，抱歉耽搁了。请记住，标签菜单仅出现在 @ 之后。我们这里有“@”的最后一个位置：text.lastIndexOf('@').

类似这样的东西（但适应你所拥有的）。尝试点击不同的名字。

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

Autocomplete textarea text after click result on list jquery

jquery

append

attr

keyup