单击列表 jquery 上的结果后自动完成 textarea 文本 [英] Autocomplete textarea text after click result on list jquery
问题描述
我正在为用户创建一个文本区域来创建帖子.在这些帖子中，他们有可能标记某人 @myfriend.我在@NiMusco 的帮助下成功开发了 jquery 代码，但是在单击结果之一后自动完成时我遇到了麻烦，例如将 @Jean (列出的结果)替换为 @Je 写在 textarea 中.
<div ><ul id=show_inline_users>php输出json数据，这种类型
$arr[] = array("channel" => $obj->channel,...);/* 返回 JSON */回声 json_encode($arr);Jquery 是正确的，但我无法自动完成用户名
var count = 0;变量标记 = 假；$('#inline_search').keyup(function(){var text = $(this).val();如果(文本长度>计数){var lastChar = text.substr(count);if(lastChar == "@"){标记 = 真；}//空白打破标记.if(lastChar == " "){标记 = 假；}//将此适应您的标记功能如果(标记 == 真){var username = text.substr(text.lastIndexOf('@') + 1, text.length);///////////在线搜索INI/////////////////////////////////////var searchKeyword = 用户名；if(searchKeyword.length>0){$.post('search/users.php', { 关键字:searchKeyword },功能(数据){$('#show_inline_users').empty();$.each(数据，函数(){$('#show_inline_users').append("<li class=opt title='"+this.channel+"' >"+this.channel+"</li>");/*$('.opt').click(function(){var user_title = $(this).attr("title");警报(用户标题)；$('#inline_search').val($('#inline_search').val()+ " @"+user_title);});*/});},"json").fail(function(xhr, ajaxOptions, throwingError) {//有什么错误吗?警报(抛出错误)；//HTTP 错误提示});}else{$('#show_inline_users').empty();}/////////////在线搜索结束////////////////////////////////////}}计数 = 文本长度；});我在那些线上有问题，我想用 .attr() 来替换
$('#show_inline_users').append("<li class=opt title='"+this.channel+"' >"+this.channel+"</li>");/*$('.opt').click(function(){var user_title = $(this).attr("title");警报(用户标题)；$('#inline_search').val($('#inline_search').val()+ " @"+user_title);});*/});*/例如，如果我在 textarea 中输入 我在 stackoverflow 上的用户名是 @Je，则会出现用户建议列表
<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='果冻'>果冻</li>
如果我点击 Jean Option，标题值会替换 textarea 中的用户文本，就像在 twitter 或 faceb0ok 中一样.
好吧，抱歉耽搁了.请记住，标签菜单只出现在@ 之后.我们这里有@"的最后一个位置: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);文字 = 文字 + 用户名；$('#post').val(text);});#post{宽度:300px；高度:50px；}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textarea id="post">我要标记@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='果冻'>果冻</li>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>
这篇关于单击列表 jquery 上的结果后自动完成 textarea 文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
