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

使用Chrome的内置搜索function时遇到的奇怪，不一致的问题。 我有大约250行数据要在手中呈现，超过可以在屏幕上显示而不滚动或缩小。

http://jsfiddle.net/hU6Kz/3723/

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

请注意，当您第一次向上拉页面时，您可以向下滚动并且所有数据都以双手forms呈现。

现在点击控制+ f来拉起Chrome的内置搜索function。 搜索handontable中的任何字符。 手中的大部分数据都不再呈现！ 如果我搜索其他东西，偶尔会再次渲染数据，但它似乎不一致，我找不到共同的原因..

这在firefox中似乎不是问题，但我的公司肯定是在Chrome阵营。 帮帮我，互联网的巫师。

Answer 1

这是因为Handsontable使用了一种称为“虚拟渲染”的精彩技术，它只渲染您当前正在查看的行以及更多。 它可以显示“无限”多行。 ctrl+f的问题在于它搜索HTML文本，因此您将无法使用此搜索。

这就是为什么有一个搜索插件可以返回所有匹配单元格的列表。 从那里你可以做很多事情，比如输入， scrollTo到下一个可用的匹配单元格（搜索）。 另一个非常着名的应用程序是通过使用较少的数据（filter）重新创建表来过滤行。

Answer 2

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

在搜索输入中写入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/