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:

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?

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

Thank you.

Answer 1

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