JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div id="container">
<h1>Article Search</h1>
<form data-bind="submit: search">
<input id="search" type="search" name="search" placeholder="Search for a article" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off" autofocus=""/>
</form>
<ul data-bind="template: {name:'searchTemplate', foreach:JsonObjFromServer}"></ul>
<script type="text/html" id="searchTemplate">
<li>
<span data-bind="text: page.tag"></span>
<span data-bind="text: page.title"></span>
<span data-bind="text: page.url"></span>
</li>
</script>
</div>
CSS
body { margin: 2em; text-align: center; }
form { margin-bottom: 2em; }
table { text-align: left; margin: 0 auto; }
th, td { padding: .2em; }
JavaScript
/*var section = [
{ id: 'Css3', name: 'CSS Selectors Level 3', url:'http://dev.w3.org/csswg/selectors3/'},
{ id: 'Css4', name: 'CSS Selectors Level 4', url:'http://dev.w3.org/csswg/selectors4/' },
{ id: 'Html5', name: 'HTML5 Introduction', url:'http://www.w3.org/html/wg/drafts/html/master/' }
];*/
var JsonObjFromServer;
var inquiryUrl = "https://api.mongohq.com/databases/kougiland/collections/lab/documents?_apikey=8KPSlzsKV0gEh3HDZV1xmC8XNtcFJ1bLlAltC9MCGx8";
$.getJSON(inquiryUrl, function (JsonObjFromServer) {
var JsonObj = JSON.stringify(JsonObjFromServer);
console.log(JsonObj);
ko.mapping.fromJS(JsonObjFromServer, {}, viewModel.JsonObjFromServer);
});
var viewModel = {
JsonObjFromServer: ko.observableArray([]),
query: ko.observable(''),
search: function(value) {
viewModel.JsonObjFromServer.removeAll();
if (value == '') return;
for (var article in JsonObjFromServer) {
if (JsonObjFromServer[article].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
viewModel.JsonObjFromServer.push(JsonObjFromServer[article]);
}
}
}
};
viewModel.query.subscribe(viewModel.search);
ko.applyBindings(viewModel);