JSFiddle - React, Tailwind, and code Playground

by Jim Marion

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="//rawgithub.com/dtao/lazy.js/master/lazy.js"></script>
<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>

CSS

@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;
}

JavaScript

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.nameSearch.extend({
      rateLimit: {
        timeout: 500,
        method: "notifyWhenChangesStop"
      }
    });

  
  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());