使用Select2插件标记Twitter和Facebook
[英]Tagging Like Twitter and Facebook Using The Select2 Plugin
问题描述
I'm using the following code to simply search and tag friends onto a textfield that I then pass to an Ajax Post. 
我正在使用以下代码来简单地搜索并将朋友标记到文本字段上，然后我将其传递给Ajax Post。 As you see from my image, I can only allow users to tag friends one after another. 正如您从我的图像中看到的，我只能允许用户一个接一个地标记朋友。 Instead of limiting users to only type friends' names for tagging, I want to emulate Facebook and Twitter and allow users to type a status update then when they type '@', invoke select2 to do an ajax call to search for friends. 我想模仿Facebook和Twitter，并允许用户键入状态更新，然后在键入“@”时调用select2进行ajax调用以搜索朋友，而不是限制用户只键入朋友的名称进行标记。 Here's my current code: 这是我目前的代码：
$("#tag_friends").select2({
formatResult: peopleFormatResult,
formatSelection: peopleFormatSelection,
tags: true,
tokenSeparators: [",", ""],
multiple: true,
placeholder: "Tag Your Friends",
minimumInputLength:1,
ajax: {
type: "POST",
url: domain+"friendstag",
dataType: "json",
data: function(term, page) {
return {
q: term
};
},
results: function(data, page) {
return {
results: data
};
}
}
});
function peopleFormatResult(people) {
var html = "<table class='people-resultado'><tr>";
html += "<td class='taggin_image'><img src='"+people.image+"'/></td>";
html += "<td class='people-info'>";
html += people.name + "<br />";
html += "</td></tr></table>";
return html;
}
function peopleFormatSelection(people) {
return people.name;
}
I use this in my ajax post afterwards to use the selected ids returned: 我之后在我的ajax帖子中使用它来使用返回的选定ID：
var tagged_friends = $("#tag_friends").select2("val");
Here's how it currently looks: 以下是目前的情况：
I've worked a week without any progress and I need it to look like the following image: 我已经工作了一个星期没有任何进展，我需要它看起来像下图：
The tagging would be initiated when the user types @. 当用户键入@时，将启动标记。 Also, any ideas how I could grab the user ids after someone has tagged some friends? 此外，任何想法，如果有人标记了一些朋友后我怎么能抓住用户ID？
I've hit a steel wall. 我撞到了钢墙。 Any help would be greatly appreciated. 任何帮助将不胜感激。
Thank you. 谢谢。
3 个解决方案
解决方案1
3 2015-03-10 18:40:16
For those who stumble upon this question in the future... 对于那些在将来偶然发现这个问题的人......
I had this same problem & found a pretty good solution: 我遇到了同样的问题并找到了一个很好的解决方案：
https://github.com/oozou/jquery-mentionable https://github.com/oozou/jquery-mentionable
I forked that repo in order to customize it to my needs. 我分叉了那个仓库，以便根据我的需求进行定制。 For example, it will now add a hidden input for each user you tag: 例如，它现在将为您标记的每个用户添加隐藏输入：
https://github.com/Root-XS/jquery-mentionable https://github.com/Root-XS/jquery-mentionable
解决方案2
0 2013-12-29 19:26:07
If I understand correctly, you try to write a free text input which reacts to the special char @ which should then display an inline select2 to display all available items (here friends). 如果我理解正确，你会尝试编写一个自由文本输入，它对特殊的char @做出反应，然后应该显示一个内联select2来显示所有可用的项目（这里是朋友）。
I can only allow users to tag friends one after another 我只能允许用户一个接一个地标记朋友
You will definitely need more than one select2 as the tags can appear anywhere in the text. 您肯定需要多个select2，因为标签可以出现在文本的任何位置。 As far as I'm aware, select2 cannot do this with a single "widget" element. 据我所知，select2无法使用单个“widget”元素执行此操作。
So the problem is not with select2 but the surrounding text input. 所以问题不在于select2而在于周围的文本输入。 As normal <input> or <textarea> are not able to display html elements inside the text, you can try to work with contenteditable . 正常情况下<input>或<textarea>无法在文本中显示html元素，您可以尝试使用contenteditable 。
<!DOCTYPE html>
...
<script>
$(document).ready(function() {
$('.friendsAwareTextInput').keypress(function(e) {
// if char is @, append a select2 input element right after it to the DOM
// and call select2 on it with your options.
});
})
</script>
...
<div contenteditable="true" class="friendsAwareTextInput">
</div>
Might find this helpful: 可能会发现这有用：
Insert html at caret in a contenteditable div 在一个可信的div中插入插入符号的html
解决方案3
0 2014-01-09 10:54:52
I just stumbled upon a Github project which might solve your problem: 我偶然发现了一个可以解决你的问题的Github项目：
http://kylegibson.github.io/select2-mentions/ http://kylegibson.github.io/select2-mentions/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.