JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0rc.js"></script>
<script src="https://s3.amazonaws.com/github-raw/progressivefilter.js"></script>
<body style="font-family: Sans-serif;">
    <p style="font-size: 0.8em; color: #696969; font-style: italic;">
        example of 
        <a href="https://github.com/thinkloop/knockout-js-progressive-filter" style="color: #000000; text-decoration:none;">knockout-js-progressive-filter</a>
        <br />
        developed for
        <a href="http://www.oppositeofopposite.com/" style="color: #000000; text-decoration:none;">OppositeofOpposite.com</a>
    </p>
    <h2 style="margin:1em 0 0 0; padding:0; line-height:0.5em;">Folders (<span data-bind="text: filteredItems().length"></span>)</h2>
    <p style="font-size: 0.8em; color: #696969;" data-bind="text: 'isFiltering? ' + filteredItems.progressivefilter.isFiltering()"></p>
    <input data-bind="value: filterString, valueUpdate: 'afterkeydown'" placeholder="Filter Folders"  />
    <br />
    <div class="folder">
        <ul class='folders' data-bind='foreach: filteredItems'>
            <li class='folder' data-bind='text: $data' />
        </ul>
    </div>
</body>

JavaScript

// knockout-js-progressive-filter (common usage)
ViewModel = function () {
    var self = this;

    self.items = ko.observableArray();
    self.filteredItems = ko.observableArray();
    self.filteredItems.extend({
        progressivefilter: {
            batchSize: 10
        }
    });

    self.filterString = ko.observable();

    // filter function
    function filterFunction(item) {
        return !self.filterString() || item.toString().toLowerCase().indexOf(self.filterString().toString().toLowerCase()) >= 0;
    }
    self.filterFunction = filterFunction;
    
    // init items
    function populateItems(numTotal) {
        var newItems = [],
            item = '',
            alphabet = 'abcdefghijklmnopqrstuvwxyz',
            numTotal = numTotal || 2000;

        for (var i = 0; i < numTotal; i++) {
            item = '';
            for( var j = 0; j < Math.floor(Math.random() * 20) + 1; j++ ) {
                item += alphabet.charAt(Math.floor(Math.random() * alphabet.length));            
            }
            newItems.push(item);
        }
        self.items(newItems);
        self.filteredItems.filterProgressive(self.items.peek());
    }
    populateItems();
}

ko.applyBindings(new ViewModel());