title: Tagging Like Twitter and Facebook Using The Select2 Plugin
body: <p>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: </p>
  
  <pre><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 = "&lt;table class='people-resultado'&gt;&lt;tr&gt;";
          html += "&lt;td class='taggin_image'&gt;&lt;img src='"+people.image+"'/&gt;&lt;/td&gt;";
          html += "&lt;td class='people-info'&gt;";
          html += people.name + "&lt;br /&gt;";
          html += "&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
          return html;
      }
  
      function peopleFormatSelection(people) {
          return people.name;
      }
  </code></pre>
  
  <p>I use this in my ajax post afterwards to use the selected ids returned:</p>
  
  <pre><code>var tagged_friends = $("#tag_friends").select2("val");
  </code></pre>
  
  <p>Here's how it currently looks: <img src="https://i.stack.imgur.com/fy46r.png" alt="Limited Tagging I have Now"></p>
  
  <p>I've worked a week without any progress and I need it to look like the following image: 
  <img src="https://i.stack.imgur.com/6WVY0.png" alt="enter image description here"></p>
  
  <p>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? </p>
  
  <p>I've hit a steel wall. Any help would be greatly appreciated. </p>
  
  <p>Thank you.</p>