Tagging Like Twitter and Facebook Using The Select2 Plugin

Asked 22/12, 2013 at 19:1 Answered 10/3, 2015 at 18:40

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.

Flump answered 22/12, 2013 at 19:1 Comment(1)

Did you make any progress or have a status update on this task? – Brakesman 30/12, 2013 at 12:30

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

Valuation answered 10/3, 2015 at 18:40 Comment(1)

Really nice :D you made my day – Mitchmitchael 25/9, 2018 at 9:8

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

Brakesman answered 29/12, 2013 at 19:26 Comment(6)

Sorry. This doesn't help at all. – Flump 31/12, 2013 at 0:2

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 stackoverflow.com/help/bounty. – Brakesman 31/12, 2013 at 5: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. – Flump 31/12, 2013 at 5: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? – Brakesman 31/12, 2013 at 5: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? – Brakesman 31/12, 2013 at 6:10

Yes, that's exactly it. Right now, I start typing and select2 action is automatically triggered. – Flump 31/12, 2013 at 18:40

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

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

Macfarlane answered 9/1, 2014 at 10:54 Comment(1)

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. – Flump 10/1, 2014 at 17:6

Recommended topics

Hot tags