Question

我正在为用户创建一个textarea来创建帖子。在这些帖子中，他们可以标记某人@myfriend。我成功地使用了@NiMusco帮助，开发了jquery代码，但是在点击其中一个结果后，我在自动填充时遇到了麻烦，例如将@Jean（列出的结果）替换为{{1在textarea中写的。

@Je

php输出json数据，此类型

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

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

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

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

我在这些方面遇到问题，我想用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()

例如，如果我在textarea中输入$('#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 stackoverflow is @Je

如果我点击Jean Option，标题值将替换textarea中的用户文本，如twitter或faceb0ok。

Answer 1

嗯，抱歉延误了。请记住，标签菜单仅出现在@之后。我们的最后一个位置是＆＃34; @＆＃34;这里：text.lastIndexOf（＆＃39; @＆＃39;）。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: