JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div id="view">
    <div>
        <input type="button" data-bind="click: setActiveFilter" value="All" />
        <input type="button" data-bind="click: setActiveFilter" value="Human" />
        <input type="button" data-bind="click: setActiveFilter" value="Dog" />
    </div>
    <!--<div>
        <input data-bind="value: searchText" id='textSearch' />
    </div>-->
    <div data-bind="foreach: itemsFiltered()">
        <div>Name: <span data-bind="text: name"></span></div>
    </div>
</div>

JavaScript

var studies = {
    items: [
        {
            name: 'Bob',
            tags: ['Male', 'Human']
        },
        {
            name: 'Sue',
            tags: ['Female', 'Human']
        },
        {
            name: 'Fido',
            tags: ['Male', 'Dog']
        }
    ],
    //searchText : ko.observable(''),
    activeFilter : ko.observable('All'),
    setActiveFilter : function(v){
        studies.activeFilter(window.event.target.value);
    },
    itemsFiltered : function itemsFiltered() {
        function matchActiveTag(v) {
            return studies.activeFilter() === 'All' || v.tags.indexOf(studies.activeFilter()) > -1;
        }
        //function searchText(v) {
           // return v.name.toLowerCase().indexOf(studies.searchText().toLowerCase()) > -1;
        //}
        var result = studies.items
            .filter(matchActiveTag);
            //.filter(searchText);
        return result;
    },
    
};
    
ko.applyBindings(studies);
$('#textSearch').on('input', function() { $(this).blur(); $(this).focus(); });