JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<div class="container" style="margin-top:20px">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-6">
            <is-dropdown params="dataSource: accounts, isLoading: accountLoading, isLoaded: accountLoaded"></is-dropdown>
        </div>
    </div>
</div>

<template id='is-dropdown-template'>
    <div class="form-group" style="margin-bottom:0">
        <div class="input-group" data-bind="css: { dropup: isListShown }">
            <input class="form-control" type="text" data-bind="value:filter, valueUpdate:'keyup', event: { keyup: keyUpHandler }" />
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" data-bind="click: toggleList"><span class="caret"></span></button>
            </span>
        </div>
    </div>
    <div class="list-group" data-bind="visible: isListShown, foreach: matches">
        <a href="#" class="list-group-item" data-bind="text:name, css: {}"></a>
    </div>
</template>

JavaScript

(function() {
    'use strict';

    var dataService = (function() {
        function DataService() {
            var self = this;
            
            var accounts = [
                { uid: '0003', name: '0003 / Expense / Sundry' },
                { uid: '0002', name: '0002 / Expense / Computer' },
                { uid: '0001', name: '0001 / Expense / General' },
                { uid: '0004', name: '0004 / Expense / Cleaning' },
                { uid: '0005', name: '0005 / Expense / Telephone' }
            ];
            
            var service = {
                getModel: getModel,
                getMaster: getMaster
            };
            
            return service;
            
            function getModel() {
                var dfd = $.Deferred();
                
                setTimeout(function() {
                    var result = {
                        accounts: accounts.slice(0,3)
                    };
                    
                    dfd.resolve(result);
                }, 1000);
                
                return dfd.promise();
            }
            
            function getMaster() {
                var dfd = $.Deferred();
                                
                setTimeout(function() {
                    var result = {
                        accounts: accounts
                    };
                    dfd.resolve(result);
                }, 5 * 60 * 1000);
                
                return dfd.promise();
            }
        }
        
        return new DataService();
    }());
    
    var ISDropDownViewModel = (function() {
        function ISDropDownViewModel(params) {
            var self = this;
            self.filter = ko.observable();
            self.isListShown = ko.observable(false);
            self.matches = ko.observableArray([]);
            self.selectedItem = ko.observable();
            
            self.dataSource = params.dataSource;
            self.isLoaded =...