JSFiddle - React, Tailwind, and code Playground

by romanych

HTML

<script src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<form data-bind="submit: onSubmit">
    Your country:&nbsp;&nbsp;<select data-bind="
        options: Countries, 
        optionsText: 'Name', 
        optionsValue: 'Id', 
        value: CountryId, 
        optionsCaption: 'Choose country', 
        chosen: true" style="width: 150px"></select><br /><br />
    Your interests:&nbsp;<select data-bind="
        options: AllInterests, 
        optionsText: 'Name', 
        optionsValue: 'Id', 
        selectedOptions: Interests, 
        chosen: true" 
    multiple="true" style="width: 300px"></select><br />
    <br />
    <input type="submit" value="Post" />
</form>
<h2>Data to submit</h2>
<pre data-bind="text: ko.toJSON(Data)">
</pre>

CSS

/* @group Base */
.chzn-container {
  font-size: 13px;
  position: relative;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.chzn-container .chzn-drop {
  background: #fff;
  border: 1px solid #aaa;
  border-top: 0;
  position: absolute;
  top: 29px;
  left: 0;
  -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
  -moz-box-shadow   : 0 4px 5px rgba(0,0,0,.15);
  -o-box-shadow     : 0 4px 5px rgba(0,0,0,.15);
  box-shadow        : 0 4px 5px rgba(0,0,0,.15);
  z-index: 999;
}
/* @end */

/* @group Single Chosen */
.chzn-container-single .chzn-single {
  background-color: #ffffff;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f4f4f4), color-stop(0.48, #eeeeee), color-stop(0.5, #f6f6f6), color-stop(0.8, #ffffff));
  background-image: -webkit-linear-gradient(center bottom, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
  background-image: -moz-linear-gradient(center bottom, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
  background-image: -o-linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
  background-image: -ms-linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
  background-image: linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
  -webkit-border-radius: 5px;
  -moz-border-radius   : 5px;
  border-radius        : 5px;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
  border: 1px solid #aaaaaa;
  -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
  -moz-box-shadow   : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
  box-shadow        : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 23px;
  line-height: 24px;
  padding: 0 0 0 8px;
  color:...

JavaScript

ko.bindingHandlers.chosen = {
    init: function(elemenet, valueAccessor) {
        var chosenOptions = ko.utils.unwrapObservable(valueAccessor());

        // use setTimeout if width of select item does not set using CSS
        //setTimeout(function() {
        $(elemenet).chosen(chosenOptions);
        //}, 0);
    },
    update: function(elemenet, valueAccessor, allValuesAccessor) {
        ko.utils.unwrapObservable(allValuesAccessor().value);
        ko.utils.unwrapObservable(allValuesAccessor().options);
        ko.utils.unwrapObservable(allValuesAccessor().selectedOptions);
        $(elemenet).trigger("liszt:updated");
    }
};

var viewModel = {
    Countries: [
        { Id: 1, Name: 'USA'},
        { Id: 2, Name: 'Canada'},
        { Id: 3, Name: 'Mexico'},
        { Id: 4, Name: 'Argentina'}
    ],
    AllInterests: [
        { Id: 1, Name: 'Music'},
        { Id: 2, Name: 'Sports'},
        { Id: 3, Name: 'Gaming'},
        { Id: 4, Name: 'Coding'}
    ],
    CountryId: ko.observable(),
    Interests: ko.observableArray(),
    onSubmit: function() {
        alert(ko.toJSON(viewModel.Data))
    }
};

viewModel.Data = {
    CountryId: viewModel.CountryId,
    Interests: viewModel.Interests
}

ko.applyBindings(viewModel);