Handsontable example

HTML

<input id="search_field" placeholder="Search" type="search">
<div id="example1" class="hot handsontable"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="http://docs.handsontable.com/0.15.0-beta6/scripts/jquery.min.js"></script> <script src="http://docs.handsontable.com/0.15.0-beta6/bower_components/handsontable/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.15.0-beta6/bower_components/handsontable/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    data = [
      ['Nissan', 2012, 'black', 'black'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray']
    ],
    example = document.getElementById('example1'),
    searchFiled = document.getElementById('search_field'),
    hot;

  hot = new Handsontable(example, {
    data: data,
    colHeaders: true,
    search: true
  });

  function onlyExactMatch(queryStr, value) {
    return queryStr.toString() === value.toString();
  }

  function getRowsFromObjects(queryResult) {
    rows = [];
    for (var i = 0, l = queryResult.length; i < l; i++) {
      //                        debugger
      rows.push(queryResult[i].row);
    }
    console.log('rows', rows);
    return rows;
  }

  Handsontable.Dom.addEvent(searchFiled, 'keyup', function(event) {
    //                    debugger
    var queryResult = hot.search.query(this.value);

    console.log(queryResult);
    rows = getRowsFromObjects(queryResult);
    console.log('hot', hot.getData());
    console.log('data', data);
    var data = hot.getData();
    var filtered = data.filter(function(d, ix) {
      return rows.indexOf(ix) >= 0;
    });
    console.log('filtered', filtered);

    hot.loadData(filtered);

    //                    hot.render();
  });


  function bindDumpButton() {
    if (typeof Handsontable === "undefined") {
      return;
    }

    Handsontable.Dom.addEvent(document.body, 'click', function(e) {

      var element = e.target || e.srcElement;

      if (element.nodeName == "BUTTON" && element.name == 'dump') {
        var name = element.getAttribute('data-dump');
        var instance = element.getAttribute('data-instance');
        var hot = window[instance];
        console.log('data of ' + name, hot.getData());
      }
    });
  }
  bindDumpButton();

});