var ViewModel = function() { 'use strict'; var self = this; var employees = [ {id: 101, name: "Beauregard Duke"}, {id: 102, name: "Lucas Duke"}, {id: 103, name: "Daisy Duke"}, {id: 201, name: "Cooter Davenport"}, {id: 301, name: "Jefferson Davis Hogg"}, {id: 302, name: "Lulu Coltrane Hogg"}, {id: 401, name: "Rosco P Coltrane"} ]; self.nameSearch = ko.observable(); self.filteredEmployees = ko.pureComputed(function() { var nameSearch = self.nameSearch(); var findByName = function(empl) { return Lazy(empl.name).contains(nameSearch); }; if (!nameSearch) { // no filter criteria so return all employees return employees; } return Lazy(employees) .filter(findByName) .value(); }); }; ko.applyBindings(new ViewModel());
<div class="employees"> <div class="empl-header"> <h2>Employees</h2> <div class="form-group form-inline"> <div class="input-group"> <input type="text" class="form-control" placeholder="(Search name)" data-bind="value: nameSearch, valueUpdate:['input']"> <div class="input-group-addon"> <i class="glyphicon glyphicon-search"></i> </div> </div> </div> </div> <table class="table table-striped"> <thead> <th>ID</th> <th>Name</th> </thead> <tbody data-bind="foreach: filteredEmployees"> <td data-bind="text: id"></td> <td data-bind="text: name"></td> </tbody> </table> </div>
@import url('//getbootstrap.com/dist/css/bootstrap.css'); .empl-header { display: flex; align-items: baseline; justify-content: space-between; } .empl-header .input-group { width: 250px; }