Javascript 使用Chrome';s内置搜索功能

Javascript 使用Chrome';s内置搜索功能,javascript,jquery,google-chrome,handsontable,Javascript,Jquery,Google Chrome,Handsontable,我在使用Chrome内置的搜索功能时遇到了一个奇怪的、不一致的问题。我有大约250行数据要在一个可触摸的屏幕上呈现,超过了不需要滚动或缩小就能在屏幕上显示的数据 请注意,当您第一次拉起页面时,您可以向下滚动,所有数据都会呈现在handsontable中 现在点击control+f以打开Chrome的内置搜索功能。在handsontable中搜索任何字符。handsontable中的大部分数据不再呈现!偶尔,如果我搜索其他内容,数据会再次呈现,但它似乎不一致,我找不到共同原因 这在firefox

我在使用Chrome内置的搜索功能时遇到了一个奇怪的、不一致的问题。我有大约250行数据要在一个可触摸的屏幕上呈现,超过了不需要滚动或缩小就能在屏幕上显示的数据

请注意,当您第一次拉起页面时,您可以向下滚动,所有数据都会呈现在handsontable中

现在点击control+f以打开Chrome的内置搜索功能。在handsontable中搜索任何字符。handsontable中的大部分数据不再呈现!偶尔,如果我搜索其他内容,数据会再次呈现,但它似乎不一致,我找不到共同原因


这在firefox中似乎不是问题,但我的公司肯定是在Chrome阵营中。互联网上的奇才们,请帮帮我。

这是因为Handsontable使用了一种称为“虚拟渲染”的奇妙技术,它只渲染当前正在查看的行以及其他一些行。它使显示“无限”多行成为可能。
ctrl+f
的问题是它搜索HTML文本,因此您无法使用它进行搜索


这就是为什么有一个搜索插件可以返回给你所有匹配单元格的列表。从那里,您可以执行许多操作,如按enter键,
滚动到下一个可用的匹配单元格(搜索)。另一个非常著名的应用程序是通过用更少的数据重新创建表来过滤行(filter)。

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

在搜索输入中写入测试,然后点击输入

这就是我上面描述的方法

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

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