Table filter does not work with back windows

Question

I am working on reproducing the filter window in real time based on the built-in search functions http://docs.handsontable.com/0.15.0-beta6/demo-search-for-values.html .

Now I have a basic setup working on http://jsfiddle.net/uL3L4teL/4/

As explained in the docs. In this code, if you enter a search string, you get the corresponding cells displayed on the console using the following function:

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

I want to capture the rows in the data array that match the search string, and filter the original “data” data in the search string before redrawing the table. This partially works using:

 Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) { // debugger hot.loadData(tData); var queryResult = hot.search.query(this.value); rows = getRowsFromObjects(queryResult); console.log('searchFiled',searchFiled.value); console.log('rows',rows); console.log('tData', tData); var filtered = tData.filter(function (d, ix) { return rows.indexOf(ix) >= 0; }); console.log('filtered', filtered); hot.loadData(filtered); }); 

However, when I run this, I see the following in the console when I enter "n" followed by backward substitution (to remove the search string):

enter 'n':

 rows [0, 1] searchFiled n rows [0, 1] tData [Array[4], Array[4], Array[4], Array[4]] filtered [Array[4], Array[4]] 

backspace (for an empty search value):

 rows [] searchFiled rows [] tData [Array[4], Array[4], Array[4], Array[4]] filtered [] 

How can I fix this so that an empty row displays the entire unfiltered table again?

Answer 1

You can add a condition inside the .filter() method that will return all rows if searchFiled.value empty or undefined:

Updated example

 var filtered = tData.filter(function(_, index) { if (searchFiled.value) { return rows.indexOf(index) >= 0; } else { return true; } }); 

Alternatively, this is a one-liner that does the same (although it is less readable):

Updated example

 var filtered = tData.filter(function(_, index) { return !searchFiled.value || rows.indexOf(index) >= 0; });