JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-1.2.1.js"></script>
<header> 
    <form action="#"> 
        <input placeholder="Suche…" type="search" name="q" data-bind="value: bewertungQuery, valueUpdate: 'keyup'" autocomplete="off"> 
    </form> 
</header> 
<div class="content"> 
    <ul data-bind="template: {name:'bewertungSuche', foreach:bewertungen}"> 
    </ul> 
</div> 

<script type="text/html" id="bewertungSuche"> 
    <li>
        <strong data-bind="text: name"></strong> –
        <span data-bind="text: firma"></span> –
        <span data-bind="text: ort"></span>
    </li>
</script>

JavaScript

var bewertungen = [
        {
        name: "custermann",
        firma: "Manos",
        ort: "Aachen"},
    {
        name: "justermann",
        firma: "K.O.D.A",
        ort: "Koeln"},
    {
        name: "Fusterfrau",
        firma: "Manos",
        ort: "Dortmund"},
        {
        name: "custer",
        firma: "Nokia",
        ort: "Bonn"},
    {
        name: "Dustermann",
        firma: "RWTH",
        ort: "Aachen"},
    {
        name: "Gustermann",
        firma: "Musterfirma",
        ort: "Dortmund"}
        ];

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

    viewModel.bewertungen = ko.dependentObservable(function() {
        var search = this.bewertungQuery().toLowerCase();
        return ko.utils.arrayFilter(bewertungen, function(bewertungSuche) {
            return bewertungSuche.name.toLowerCase().indexOf(search) >= 0 || bewertungSuche.firma.toLowerCase().indexOf(search) >= 0 || bewertungSuche.ort.toLowerCase().indexOf(search) >= 0;
        });
    }, viewModel);

    ko.applyBindings(viewModel);