Tagit

Tagit Tags

HTML

<link rel="stylesheet" href="http://aehlke.github.com/tag-it/css/jquery.tagit.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script src="http://aehlke.github.com/tag-it/js/tag-it.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://underscorejs.org/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<ul id="mytags" data-bind='foreach: SelectedTags ' >
    <li style="display:none" data-bind="text:Name,value:Id"></li>
</ul>

JavaScript

function AppViewModel() {
var self = this;


self.SelectedTags = ko.observableArray([
    new Tag({'Name':'red','Id':'1'})]);
self.Tags = ko.observableArray([
    new Tag({'Name':'red','Id':'1'}),
    new Tag({'Name':'blue','Id':'2'}),
    new Tag({'Name':'green','Id':'3'})
        ]);
    return self;
 }dg
function Tag(data) {
            this.Name = ko.observable(data.Name);
            this.Id= ko.observable(data.Id);
        }
// Activates knockout.js
ko.applyBindings(new AppViewModel());

$("#mytags").tagit({
     availableTags: JSON.parse(ko.toJSON(_.pluck(AppViewModel.Tags, 'Name'))),
     onTagAdded: function (event, tagval) {
                        //on every add add with id if tag exist in system
                        var newtag = $(tagval).children('span.tagit-label').html();
                        var temp = _.find(AppViewModel.Tags, function (item) { return item.Name() == newtag; });
                        if (temp) {
                                AppViewModel().SelectedTags.push( Tag({ 'Id': temp.Id(), "Name": newtag} ));
                        }
                        else {
                                AppViewModel().SelectedTags.push( Tag({ "Name": newtag} ));
                        }

                    },
    onTagRemoved: function (event, tagval) {
                        // do something special
                        var tempTag = $(tagval).children('span.tagit-label').html();
                        AppViewModel().SelectedTags.remove(_.find(SelectedTags(), function (item) { return item.Name == tempTag; }));
                    }
});