Tagging system (new)

by bradleygriffith

HTML

<div id='container-element'>
    <input id="post_tag_list" name="post[tag_list]" value='testing, test, probably, goose, under_score'/>
</div>
<span id='sample-output' style='width: 500px; display: block; font-size: 10px;'></span>

CSS

body {
    padding: 25px;
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

div#tagging_field {
    width: 400px;
    min-height: 21px;
    border: 1px solid grey;
    padding: 0 2px 2px 2px;
    overflow: hidden;
}

div#tagging_field span.tag {
    display: block;
    padding: 3px 3px 4px 5px;
    background: royalblue;
    color: white;
    font-size: 12px;
    margin-right: 2px;
    margin-top: 2px;
    float: left;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

div#tagging_field span.tag span.remove-tag{
    background: tomato;
    width: 14px;
    height: 14px;
    text-align: center;
    display: block;
    float: right;
    margin-left: 4px;
    cursor: pointer;
}

.tag-input {
    border: 0;
    font-size: 12px;
    float: left;
    margin-right: 2px;
    margin-top: 2px;
    padding: 2px 0 4px;
}

div#tagging_field input.tag-input {
    width: 23px;
}

div#tagging_field input.tag-input:focus {
    outline: none;
}

JavaScript

$(document).ready(function(){

          var Class = function() {
            return function(params) {
              if ( !(this instanceof arguments.callee) ) {
                return new arguments.callee(arguments);
              }
              this.initialize.apply(this,(params.callee ? params : arguments));
            };
          };

          // Returns position of cursor
          function caretPosition(node) {
              if(node.selectionStart) {
                  return node.selectionStart;
              }
              else if(!document.selection) {
                  return 0;
              }
              var c = "\001",
                  sel = document.selection.createRange(),
                  dul = sel.duplicate(),
                  len = 0;
              dul.moveToElementText(node);
              sel.text = c;
              len = (dul.text.indexOf(c));
              sel.moveStart('character',-1);
              sel.text = "";
              return len;
          }

          function getKeyByValue(obj, value ) {
              for( var prop in obj ) {
                  if( obj.hasOwnProperty( prop ) ) {
                      if( obj[ prop ] === value ){
                          return prop;
                      }
                  }
              }
              return false;
          }
          
          function makeAlphanumeric(str, underscores_ok){
              var match = underscores_ok ? /[^a-z0-9_]/gi : /[^a-z0-9]/gi;
              return str.replace(match, "");
          }
          

          /*--------------^GENERICS^----------------*/
          /*----------------------------------------*/
          
          
          var TaggingForm = Class();

          // Only takes text input fields for now!
          TaggingForm.prototype = {
              initialize: function(tag_field){
                  this.tag_field = $(tag_field);
                  this.current_tags = this.tag_field.val() || false;
                 ...