使用Select2插件标记Twitter和Facebook
use*_*713 7 javascript jquery jquery-select2
我正在使用以下代码来简单地搜索并将朋友标记到文本字段上,然后我将其传递给Ajax Post.正如您从我的图像中看到的,我只能允许用户一个接一个地标记朋友.我想模仿Facebook和Twitter,并允许用户键入状态更新,然后在键入"@"时调用select2进行ajax调用以搜索朋友,而不是限制用户仅键入朋友的名称进行标记.这是我目前的代码:
$("#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;
}
我之后在我的ajax帖子中使用它来使用返回的选定ID:
var tagged_friends = $("#tag_friends").select2("val");
以下是目前的情况: 
我已经工作了一个星期没有任何进展,我需要它看起来像下图:
当用户键入@时,将启动标记.此外,任何想法,如果有人标记了一些朋友后我怎么能抓住用户ID？
我撞到了钢墙.任何帮助将不胜感激.
谢谢.
如果我理解正确，您尝试编写一个自由文本输入，该输入对特殊字符做出反应，@然后应该显示内联 select2 以显示所有可用项目（这里是朋友）。
我只能允许用户一个接一个地标记朋友。
您肯定需要多个 select2，因为标记可以出现在文本中的任何位置。据我所知， select2 无法使用单个“小部件”元素来执行此操作。
所以问题不在于 select2 ，而在于周围的文本输入。正常情况下<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>
可能会发现这有帮助：
Insert html at caret in a contenteditable div
| 归档时间： |
|
| 查看次数： |
4587 次 |
| 最近记录： |