使用 Chrome 的内置搜索功能时，Handsontable 未完全呈现

Question

使用 Chrome 的内置搜索功能时，我运行遇到了奇怪的、不一致的问题。我有大约 250 行数据要在手控器中呈现，多于无需滚动或缩小即可显示在屏幕上的数据。

var myData = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["lots of data begins here"],
             ];

$("#exampleGrid").handsontable({
    data: myData,
    startRows: 5,
    startCols: 5,
    minSpareCols: 1,
    minSpareRows: 1,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true
});

观察一下，当你第一次拉起页面时，你可以向下滚动，所有的数据都呈现在handsontable中。

现在按 control + f 调出 Chrome 的内置搜索功能。搜索 handsontable 中的任何字符。 handsontable 中的大部分数据不再呈现！如果我搜索其他内容，偶尔会再次呈现数据，但似乎不一致，我找不到共同原因..

这在firefox中似乎不是问题，但我所在的公司却断然属于Chrome阵营。互联网高手们，帮帮我吧。

Answer 1

这是因为 Handsontable 使用了一种叫做 "Virtual Rendering" 的绝妙技术，它只呈现您当前正在查看的行以及其他一些行。它可以显示 "infinitely" 多行。 ctrl+f 的问题在于它会搜索 HTML 文本，因此您将无法使用它进行搜索。

这就是为什么有一个可用的搜索插件，它 returns 为您提供所有匹配单元格的列表。从那里你可以做很多事情，比如在输入时，scrollTo 下一个可用的匹配单元格（搜索）。另一个非常著名的应用是通过用更少的数据重新创建 table 来过滤行（过滤器）。

Answer 2

这里有一个使用 handsontable 搜索功能的工作演示。

在搜索输入中输入 Test 然后按 Enter。

这是执行上述操作的方法。

var searchField = document.getElementById('search_field');

Handsontable.Dom.addEvent(searchField, 'keyup', function (event) {
  if (event.keyCode == 13) {
    var queryResult = hot.search.query(this.value);
    hot.selectCell(queryResult[0].row, queryResult[0].col);
  }
});

http://jsfiddle.net/pdivasto/hp8ge8kk/

使用 Chrome 的内置搜索功能时，Handsontable 未完全呈现

Handsontable is not fully rendered when using Chrome's built in search function

javascript

jquery

google-chrome

handsontable