searching like facebook tag in autocomplete

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

     

  </div>

<script>

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

 var availableTags_category = <%= raw @categories %>;

  

function split(val) {

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

}

function split2(val) {

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

}

function extractLast(term) {

    return split(term).pop();

}

function extractLast2(term) {

    return split2(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...'];

              }

          }

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

              

              term = extractLast2(request.term);

              if (term.length > 0) {

                results = $.ui.autocomplete.filter(

                availableTags_category, term.trim());

              } else {

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

              }

          }

          response(results);

      },

      focus: function() {

          // prevent value inserted on focus

          return false;

      },

      select: function(event, ui) {

        if (ui.item.state == "user"){

          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;

        }

        else{

          var terms2 = split2($(this).html());

          // remove the current input

          terms2.pop();

          // add the selected item

          terms2.push("<span class='tagged_category' style='color:green' id="+ui.item.value+">"+ui.item.label+"</span>");

          

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

          terms2.push("&nbsp;");

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

          //this.value = terms2.join("");

          return false;

        }

      }

  });

$('.event_submit').click(function(){

  var user_ids = [];

  var categories_ids = [];

     $(".post_content_textarea span").each(function(index, element){

     user_ids.push(element.id);

    });

     $(".post_content_textarea span.tagged_category").each(function(index, element){

       categories_ids.push(element.id);

     });

     var des = $('.post_content_textarea').html()

   $('#event_description').val(des)

   $('.append_tag').html('<input type="hidden" class="hidden_tag_class" id = "hidden_tag" name="tag" value="'+user_ids+'">')

   $('.append_category').html('<input type="hidden" name="tag_category" value="'+categories_ids+'">')

})

</script>