Geek Answers Handbook

Flag Twitter and Facebook with Select2 Plugin

I use the following code to just find and tag friends in a text box, which I then pass to Ajax Post. As you can see in my image, I can only allow users to tag friends one after another. Instead of restricting users to only type friend names for tags, I want to emulate Facebook and Twitter and allow users to enter status updates, and then when they type “@”, they call select2 to call ajax to search for friends. Here is 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 post ajax after using the selected ids:

 var tagged_friends = $("#tag_friends").select2("val");

Here's what it looks like now: Limited Tagging I have Now

I worked a week without any success, and I need it to look like this: enter image description here

Tagging will be initiated when the user types @. Also, any ideas on how I can capture user IDs after someone has tagged friends?

I hit a steel wall. Any help would be greatly appreciated.

Thanks.

+7
javascript jquery jquery-select2
source share
3 answers

For those who stumble upon this question in the future ...

I had the same problem and found a pretty good solution:

https://github.com/oozou/jquery-mentionable

I branched this repo to tune it to my needs. For example, now it will add hidden input for each user you tagged:

https://github.com/Root-XS/jquery-mentionable

+2
source share

If I understand correctly, you are trying to write free text input that responds to a special char @ , which then must display the built-in select2 to display all the available elements (friends here).

I can allow users only friend tags one after another
You will definitely need more than one select2, as tags can appear anywhere in the text. As far as I know, select2 cannot do this with a single widget element.

So the problem is not select2, but the surrounding text input. Since regular <input> or <textarea> cannot display html elements inside the text, you can try working with 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>

Perhaps this will be useful:
Insert html in carriage in contenteditable div

0
source share

I just stumbled upon a Github project that could solve your problem:

http://kylegibson.imtqy.com/select2-mentions/

0
source share

More articles:


All Articles