example1

by FZambia

HTML

<html>
<body>
<h1>My First Heading</h1>
    <input type="text" id="mt">
</body>
</html>

JavaScript

multitag = {
    options:{
        link:'/',
        prefix:'user',
        value:''
    },
    _create:function(){
        this._render();
    },
    _render:function(){
        var e = this.element;
        var o = this.options;
        var html = this._create_html()
        /*
        e.autocomplete({
            source: o.link,
            minLength: 2,
            select: function(event, ui) {
                this.value='';
                var element = makeElem(ui.item.value,ui.item.id);
                change_list(ui.item.id,'add',element);
                return false;
            }
        }).keypress(function(e) {
            if (e.keyCode === 13) {
                return false;
            }
        })
        */
    },
    _create_html:function() {
        this.hidden = $('<input type="hidden" name="'+this.options.prefix+'_list" value="'+this.options.value+'" />');
        this.wrapper = $('<div class="mt-select-block" id="'+this.options.prefix+'-mt-select-block"></div>');
        this.element.wrap(this.wrapper);
        this.element.after(this.hidden);
        this.tag_wrapper = $('<div class="mt-tag-block" id="'+this.options.prefix+'-mt-tag-block"></div>');
        this.list_wrapper = $('<div class="mt-representation"></div>');
        this.list = $('<ul class="mt-items" id="'+this.options.prefix+'-mt-items"></ul>');
        this.tag_wrapper.append(this.list_wrapper);
        this.list_wrapper.append(this.list);
        this.element.parent().after(this.tag_wrapper);
    }
}

$.widget("ui.multitag",multitag);


$('#mt').multitag();