Kendo UI Grid

Local data, search multiple fields

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid"></div>
<input type="text" id="search" />

JavaScript

$(document).ready(function() {
  var data = [
    {firstName: 'Bob test', lastName: 'Kelso'},
    {firstName: 'abc test', lastName: 'def'},
    {firstName: 'toto test', lastName: 'tata'},
    {firstName: 'foo test', lastName: 'var'},

  ];

  $("#grid").kendoGrid({
    dataSource: {data: data},
    height: 350,
    columns: ['firstName', 'lastName']
  });
  
  var searchOperator = function(items, filterValue) {
  	var searchText = $('#search').val().toLowerCase().split(/[\s,]+/);
  	if (searchText.length) {
    	var found = false;
      for(var s in searchText) {
        for(var t in items){
          if (items[t].toLowerCase().indexOf(searchText[s]) != -1) {
            found = true;
            break;
          }
        }
      }
      return found;
    
    
    }
    return true;
  };
  
  
  
  $('#search').on('change', function() {
  	var dataSource = $("#grid").data('kendoGrid').dataSource;
    var searchText = $(this).val();
    dataSource.filter({
    	logic:"or",
      filters: [{
        operator: searchOperator
      }]
    });
  
  });
  
});