JSFiddle - React, Tailwind, and code Playground

by mindeavor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
<div id="app"></div>

JavaScript

var Leaderboard = {}

Leaderboard.controller = function () {
    var ctrl = this
    ctrl.query = ''
    ctrl.filter = function (item) {
        return item.name.indexOf(ctrl.query) >= 0
    }
}

Leaderboard.view = function (ctrl) {
    return m('.leaderboard', [

        m('label', "Search:"),
        
        m('input[type=text]', {
            key: 'search',
            value: ctrl.query,
			oninput: function(e) {
                ctrl.query = e.currentTarget.value
            },
        }),

        modelData.filter(ctrl.filter).map(function(p) {
            return m('li', p.name + ' likes ' + p.hobby)
        })
    ])
}

var modelData = [
    { name: 'alice', hobby: 'programming' },
    { name: 'bob', hobby: 'gaming' },
    { name: 'carl', hobby: 'crafting' },
    { name: 'dan', hobby: 'dancing' },
    { name: 'erl', hobby: 'curling' }
]

m.mount(document.getElementById('app'),Leaderboard)