JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<header> 
    <form action="#"> 
        <input class=search-query placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off"  speech x-webkit-speech> 
    </form> 
</header> 
<div class="content"> 
    <ul data-bind="foreach:books"> 
        <li>
            <strong data-bind="text: id"></strong> –
            <span data-bind="text: kind"></span> –
            <span data-bind="text: etag"></span> -
            <p data-bind="text: volumeInfo.description"></p>
        </li>
    </ul> 
</div>

JavaScript

var viewModel = {
        query: ko.observable('')
    };    

    var url = "https://www.googleapis.com/books/v1/volumes?q=the+Cat+In+The+Hat",path =$.getJSON(url);    

    path.then( function (data) {
    var books = data.items;
        console.log(books);
    viewModel.model = ko.mapping.fromJS(data.items);
    viewModel.books = ko.computed(function () {
        var search = this.query().toLowerCase();
        return ko.utils.arrayFilter(this.model(), function (book) {
            return book.id().toLowerCase().indexOf(search) >= 0 || book.kind().toLowerCase().indexOf(search) >= 0 || book.etag().toLowerCase().indexOf(search) >= 0 });
    }, viewModel);
    ko.applyBindings(viewModel);
});