Tagging Like Twitter and Facebook Using The Select2 Plugin

Question

I'm using the following code to simply search and tag friends onto a textfield that I then pass to an 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. 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:

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

Here's how it currently looks: Limited Tagging I have Now

I've worked a week without any progress and I need it to look like the following image: enter image description here

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?

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

Thank you.

Did you make any progress or have a status update on this task? — angabriel, Dec 30 '13 at 12:30

score 3 · Answer 1 · answered Mar 10 '15 at 18:40

3

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

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

answered Mar 10 '15 at 18:40

mopo922

6,293
3
28
31

Really nice :D you made my day – tomzi Sep 25 '18 at 09:08

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

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

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. As far as I'm aware, select2 cannot do this with a single "widget" element.

So the problem is not with select2 but the surrounding text input. As normal <input> or <textarea> are not able to display html elements inside the text, you can try to work 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>

Might find this helpful:
Insert html at caret in a contenteditable div

edited May 23 '17 at 12:30

Community

1
1

answered Dec 29 '13 at 19:26

angabriel

4,979
2
35
37

Sorry. This doesn't help at all. – user1011713 Dec 31 '13 at 00:02
m8, I did invest quite some time on this answer. **This** kind of comment doesn't help even more, because you are not saying **why** it did not help. Same is your behavior with this question in general: You asked it 8! days ago, told us it took you a whole week, but you were silent all these days. Indicating that your interest in solving it was low. We need feedback as nobody can word out a perfect question. Sorry, but its obvious this is not worth a 50+ bounty. To backup my arguments: Please read the **first sentence** here http://stackoverflow.com/help/bounty. – angabriel Dec 31 '13 at 05:37
I can't use any code from your answer to remotely try anything. Also this, "This is a quite a big task and a good example why more and more people say: "how can it be so hard / take so much time - facebook and google are doing it"..." is not very helpful. Finally, I pasted lines of code that were basically ignored in your answer. Also considering my comment, "I've hit a steel wall", it's hard to imagine an update to my own question. – user1011713 Dec 31 '13 at 05:46
Ok. Because there is nothing wrong with that code. It actually looks very good. But your screenshot what you want to achieve was the base to my answer. Don't let us argue but solve this somehow. Anyone else to help us? – angabriel Dec 31 '13 at 05:54
To make it clear: The flow is, user types "I'm looking to go to the market with **@**" bam! select2 action. Selects 1 friend. Typing goes on "and maybe even **@**" bam! another select2 action. Selects a friend. Is this what you want? – angabriel Dec 31 '13 at 06:10
Yes, that's exactly it. Right now, I start typing and select2 action is automatically triggered. – user1011713 Dec 31 '13 at 18:40

score 0 · Answer 3 · answered Jan 09 '14 at 10:54

0

I just stumbled upon a Github project which might solve your problem:

http://kylegibson.github.io/select2-mentions/

answered Jan 09 '14 at 10:54

Tobi

31,405
8
58
90

It's close but it's just "associating it with another input or textarea". I need it all in one textarea or input and to vary calling select2 based on whether @ mention was typed in. – user1011713 Jan 10 '14 at 17:06

Tagging Like Twitter and Facebook Using The Select2 Plugin

3 Answers3