JQuery UI Roll Your OWN TAG IT CAPABILITY

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dark-hive/jquery-ui.css">
<label for="tags">Tag programming languages: </label>
<div class="tagInputWrapper">
<input id="tags" size="50" />
</div>

CSS

span.tag {
  border: 2px inset #80ffff;
  background-color: #80ffff;
  padding: .2em;
  margin: .2em;
}
div.tagInputWrapper {
  border: 1px solid black;
  padding: 5px;            
}
div.tagInputWrapper input {
    border: 0px;
}

JavaScript

$(function() {
        
        $(".tagInputWrapper").on("click","span.tag",function(){
          $(this).remove();            
        });
        
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

        $( "#tags" )
            // 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 ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    $(this).before("<span class='tag'>" + ui.item.value + "</span>");
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected...