JSFiddle - React, Tailwind, and code Playground

by outis

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<fieldset class="span20 offset2">
    <legend>Search Me!</legend>
    <form class="form-search">
        <div class="input-append">
            <input type="text" data-bind="value: searchFieldKo, valueUpdate: 'afterkeydown'" class="input-medium search-query" id="searchField">
            <button class="btn" data-bind="click: submitSearch">search</button>
        </div>
    </form>
     <h5> Search Results:</h5>

    <ul data-bind="foreach: searchResult" class="unstyled">
        <li> <span data-bind="text: fName"></span>  <span data-bind="text: lName"></span>

        </li>
    </ul>
     <h5>People List:</h5>

    <ul data-bind="foreach: people" class="unstyled">
        <li> <span data-bind="text: fName"></span>  <span data-bind="text: lName"></span>

        </li>
    </ul>
</fieldset>

JavaScript

function AppViewModel() {
        var self = this;

        self.people = ko.observableArray([{
            fName: "Thomas",
            lName: "Edison"
        }, {
            fName: "Sally",
            lName: "Salputrio"
        }, {
            fName: "Edward",
            lName: "Sparkleshine"
        }, {
            fName: "Jacob",
            lName: "Wolfsson"
        }]);
        self.searchResult = ko.observableArray([]);
        self.searchFieldKo = ko.observable("");
        console.log('$ version:', $.fn.jquery);

        self.submitSearch = function () {
            if (self.searchFieldKo() != "") {
                self.searchResult().length = 0;
                $.each(self.people(), function (pKey, pObj) {
                    $.each(pObj, function (pProp, pValue) {
                        if (pValue.toString().toLowerCase().indexOf(self.searchFieldKo().toLowerCase()) >= 0) {
                            self.searchResult().push(self.people()[pKey]);
                            console.log(self.searchResult());
                        }
                    })
                })
            } else {
                alert("Please type something.");
            }
        }
    }

    ko.applyBindings(new AppViewModel());