JSFiddle - React, Tailwind, and code Playground

by MikeEast

HTML

<script src="https://raw.github.com/loopj/jquery-tokeninput/master/src/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="http://loopj.com/jquery-tokeninput/styles/token-input-facebook.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<input type="text" data-bind="tokenInput: { url: urlToJsonEndpoint, theme: 'facebook', hintText: 'Sök person', searchingText: 'Söker..', noResultsText: 'Inga resultat', selected: selectedTokens }" />

<ul data-bind="foreach: selectedTokens">
    <li data-bind="text: name"></li>     
</ul>

<ul data-bind="foreach: prevTokens">
    <li><span data-bind="text: name"></span> <i data-bind="visible: hasBeenSelected">x</i></li>     
</ul>

JavaScript

// Binding for http://loopj.com/jquery-tokeninput
ko.bindingHandlers.tokenInput = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};
        if(!options.url)
            throw new Error("url must be set");
        options.onAdd = function(item) {
            options.selected($(element).tokenInput('get'));
        };        
        $(element).tokenInput(options.url, options)
    }
}

var vm = function() {
    var self = this;
    self.urlToJsonEndpoint = ko.observable('http://shell.loopj.com/tokeninput/tvshows.php');
    self.selectedTokens = ko.observableArray([]);
    self.prevTokens = ko.observableArray([
        { id: '5fe1c68b31f0594612b14c16502af2a3', name: 'Wife Swap'}, 
        { id: 'f5f7ee41d8766edb1a3a67da05f057ac', name: 'Trading Spouses' }, 
        { id: 'e38303c71d98ba5afa8d42509e2ddd5b', name: 'Trailer Park Boys' }
    ]);
    ko.utils.arrayForEach(self.prevTokens(), function(t) {
        t.hasBeenSelected = ko.observable(false);
    });
    self.selectedTokens.subscribe(function(selectedTokens) {
        ko.utils.arrayForEach(self.prevTokens(), function(t) {
            if(self.arrayContains(selectedTokens, t, function(x, y) { return x.id == y.id; }))
               t.hasBeenSelected(true);            
        });
    })
    
    self.isArray = function(obj) {
        return obj.constructor === Array;
    };
    self.arrayContains = function(array, arrayOrSingleItem, comparer) {
        if(comparer == null)
            comparer = function(x, y) { return x == y; };
        if(self.isArray(arrayOrSingleItem)) {
            for(var i = 0; i < array.length; i++) {
                for(var j = 0; j < arrayOrSingleItem.length; j++) {
                    if(comparer(array[i], arrayOrSingleItem[j]))
                        return true;
                }
            }
        }
        else {
            for(var k = 0; k < array.length;...