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>

Comments

Popular Posts

How to pass hash in Postman

nginx: unrecognized service

Reading Excel Sheets using "Roo" gem in ruby on rails

Bootstrap Select Picker append add new item if search not exist

Add CORS to Nginx on AWS Elastic Beanstalk

Enable gzip compression on Elastic Beanstalk with nginx

Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'

Get video duration by URL in Ruby on Rails

site-enables nginx setting in ruby in rails