search by @ symbol in autocomplete

<div id="post_content" contenteditable="true" class="post_content_textarea">

     

  </div>

<script>

var availableTags = <%= raw @users %>;

  

function split(val) {

      return val.split(/@\s*/);

}

function extractLast(term) {

    return split(term).pop();

}

  $(".post_content_textarea")

  // don't navigate away from the field on tab when selecting an item

  .bind("keydown", function(event) {

      if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {

          event.preventDefault();

      }

  }).autocomplete({

      minLength: 0,

      source: function(request, response) {

          var term = request.term,

              results = [];

          if (term.indexOf("@") >= 0) {

              

              term = extractLast(request.term);

              if (term.length > 0) {

                results = $.ui.autocomplete.filter(

                availableTags, term.trim());

              } else {

                  results = ['Start typing...'];

              }

          }

          

          response(results);

      },

      focus: function() {

          // prevent value inserted on focus

          return false;

      },

      select: function(event, ui) {

          var terms = split($(this).html());

          // remove the current input

           

          terms.pop();

          // add the selected item

          terms.push("<span class='tagged_uid' style='color:red' id="+ui.item.value+">"+ui.item.label+"</span>");

          // add placeholder to get the comma-and-space at the end

          terms.push("&nbsp;");

          $(this).html(terms.join(""));

          return false;

       

      }

  });

</script>