Tagit on input field

Using jQuery Tagit on input fields.

HTML

<script src="http://webspirited.com/tagit/js/tagit-themeroller.js"></script>
<link rel="stylesheet" href="http://webspirited.com/tagit/css/themeroller/bootstrap/Bootstrap.css">
<link rel="stylesheet" href="http://webspirited.com/tagit/css/themeroller/tagit.css">
<p>This example shows how to use Tagit on an input!</p>
<input type="text" id="text" name="tags" value="one,two,three"/>

CSS

ul.tagit.ui-widget li.tagit-new input.tagit-input[type="text"] { display: inline-block !important; }

.ui-autocomplete { opacity: 0; }

.pre-filter {
    color: #808080;
    font-size: 13px;
    line-height: 18px;
}
.hidden { display: none; }

JavaScript

$(document).ready(function() {

    //The demo tag array
    var availableTags = [
        {
        value: 1,
        label: 'tag1'},
    {
        value: 2,
        label: 'tag2'},
    {
        value: 3,
        label: 'tag3'}];

    //The text input
    var input = $("input#text");

    //The tagit list
    var instance = $("<ul class=\"tags\"></ul>");

    //Store the current tags
    //Note: the tags here can be split by any of the trigger keys
    //      as tagit will split on the trigger keys anything passed  
    var currentTags = input.val();

    //Hide the input and append tagit to the dom
    input.hide().after(instance);

    //Initialize tagit
    instance.tagit({
        tagSource: availableTags,
        tagsChanged: function() {

            //Get the tags            
            var tags = instance.tagit('tags');
            var tagString = [];

            //Pull out only value
            for (var i in tags) {
                tagString.push(tags[i].value);
            }

            //Put the tags into the input, joint by a ','
            input.val(tagString.join(','));
        },
        onTagAdded: function() {
            inpNext.parent().find('.pre-filter').remove();
        }
    });

    //Add pre-loaded tags to tagit
    instance.tagit('add', currentTags);

    var inpNext = input.next();
    var autoCompelteMenu = $('.ui-autocomplete', inpNext);

    inpNext.on('keydown', '.tagit-input', function(e) {
        var $parent = $(this).parent();
        var $preFilter = $parent.find('.pre-filter');
        if (e.which == 8 && this.value == '') { //backspace           
            $preFilter.remove();
        } else if (e.which == 9 || e.which == 32 || e.which == 188 || e.which == 44 || e.which == 13) { //tab or space, comma and enter
            $preFilter.remove();
            autoCompelteMenu.css('opacity', 0);
        }

    }).on('keypress', '.tagit-input', function(e) {

        var $parent = $(this).parent();
        var $preFilter...