表格过滤器不适用于退格

Question

我正在努力根据http://docs.handsontable.com/0.15.0-beta6/demo-search-for-values.html 的内置搜索功能复制一个带有handsontable 的实时过滤器框。

现在我在http://jsfiddle.net/uL3L4teL/4/ 进行了基本设置

如文档中所述，在此代码中，如果您输入搜索字符串，则会使用以下函数将匹配的单元格输出到控制台：

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

我想在重新显示表格之前抓取数据数组中与搜索字符串匹配的行并通过搜索字符串过滤原始数据“数据”。这部分使用：

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

});

但是，当我运行此命令时，当我输入“n”后跟退格（以清空搜索字符串）时，我会在控制台中看到以下内容：

输入'n'：

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

退格（清空搜索值）：

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

我该如何解决这个问题，以便空字符串再次显示整个未过滤的表？

Answer 1

您可以在 .filter() 方法内添加一个条件，如果 searchFiled.value 的值为空或未定义，则该条件将返回所有行：

Updated Example

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

或者，这里有一个做同样事情的单行代码（尽管它的可读性较差）：

Updated Example

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