JSFiddle - React, Tailwind, and code Playground

by Riderman Sousa

HTML

<script src="http://ivaynberg.github.io/select2/select2-3.4.1/select2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.4/select2-bootstrap.css">
<ul class="nav nav-tabs">
    <li><a href="#multiple" data-toggle="tab">Multiple view</a>
    </li>
    <li><a href="#single" data-toggle="tab">Single view</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="multiple">
         <h4>Editor</h4>

        <input class="col-sm-10" data-bind="value: SelectedGroups, select2: { minimumInputLength: 2, query: grupoUsuariosQuery, multiple: true }" required="required" type="hidden" />
         <h4>Display</h4>

    </div>
    <div class="tab-pane" id="single">
         <h4>Editor</h4>

         <h4>Display</h4> 
    </div>
</div>

CoffeeScript

# Binder
ko.bindingHandlers.select2 =
	init: (element, valueAccessor, allBindingsAccessor) -> 
		
		obj = valueAccessor()
		$element = $(element)
		allBindings = allBindingsAccessor()

		if $element.is("input")		
			fieldDisplay = if allBindings.optionsText then allBindings.optionsText else "Nome"
			select2Defaults = id: (obj) -> obj.Id 
			select2Defaults.formatSelection = select2Defaults.formatResult = (obj) -> obj[fieldDisplay]
			obj = $.extend true, {}, select2Defaults, obj

		$element.select2(obj)
		if ($element.attr("disabled"))
			delete obj.query
			obj.data = 
				results: ko.unwrap allBindings.value
				text: (a) -> a[fieldDisplay]
		ko.utils.domNodeDisposal.addDisposeCallback(element, () -> $element.select2('destroy'))
	update: (element) ->  $(element).trigger('change')
    
# Data sample
groups = [
            Id: 1, Nome: "Vivo"
        ,
            Id: 2, Nome: "Tim"
        ,
            Id: 3, Nome: "Telemig"
        ,
            Id: 4, Nome: "Oi"
        ,
            Id: 5, Nome: "Claro"
    ]

# Sample
vmSingle =
    Nome: "Riderman [Telemig]"
    SelectedGroup: [3]
    
vmMultiple =
    Nome: "Riderman [Oi, Claro, Vivo]"
    SelectedGroups: [4, 5, 1]
    grupoUsuariosQuery: (query) -> 
        data = results: []
        $.each groups, () -> 
            if(query.term.length == 0 || this.Nome.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 )
                data.results.push this
        query.callback data 
    
ko.applyBindings vmSingle, document.getElementById("single")
ko.applyBindings vmMultiple, document.getElementById("multiple")

$('ul.nav a:first').tab('show')