habtmtags

( function($) {
        $.fn.habtmTags = function(options) {

            var settings = $.extend({
                add : null,

            }, options);

            var str = "";
            var selector = this.selector; //#Tags
            var selected = "";
            var input = '<input type="text" id="typeahead" />';
            var tagsContainer = '<div id="str"></div>';

            // get values from multiple select list and construct tags elements
            $(selector + "> option").each(function() {
                if ($(this).prop('selected')) {
                    str += '<span class="label label-info">' + $(this).text() + ' <a href="#' + $(this).val() + '" class="remove-tag" id="' + $(this).val() + '">x</a></span>' + ' ';
                    selected += $(this).val();
                }
            });


            // create tags elements
            //$(this.selector).css('display','none').after(tagsContainer);
            $(selector).after(tagsContainer);
            $("#str").html(str + ' ' + input);

            // remove Tags and unselect current list option
            /**$(".remove-tag").on('click',function(event) {
                var id = event.target.id;
                alert(id);
                $(selector + "> option[value$='" + id + "']").removeAttr("selected");
                //$(selector + "> span[id$='"+id+"']").remove();
                $(this).parent().remove();
            });*/

            $("#str").delegate(".remove-tag", "click", function (event){
                var id = event.target.id;
                //alert(id);
                $(selector + "> option[value$='" + id + "']").removeAttr("selected");
                $(selector + "> span[id$='"+id+"']").remove();
                $(this).parent().remove();
            });

            // add new tag value in database and append select list and create new span element

            $("#typehead").keypress(function(event) {
                if (event.which == 13) {
                    event.preventDefault();
                    $.post('../../oznake/dodaj',{ name: $("#typeahead").val(), user_id: "1" })
                        .done(function(data){
                            $( selector ).append( '<option value="'+data+'" selected="selected">'+$("#typeahead").val()+'</option>' );
                            $("#typeahead").before('<span class="label label-info">' + $("#typeahead").val() + ' <a href="#' + data + '" class="remove-tag" id="' + data + '">x</a></span>' + ' ');
                            $("#typeahead").val('');
                        });

                }

            });


        };
    }(jQuery));