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.

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.

• javascript
• jquery
• jquery-select2

• Did you make any progress or have a status update on this task? – angabriel Commented Dec 30, 2013 at 12:30

3 Answers 3

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

I had this same problem & found a pretty good solution:

https://github./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./Root-XS/jquery-mentionable

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

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

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