JavaScript-在页面中查找文本并跳转到页面中的位置

我有一个包含大量记录的网页（比如一个表中有250多行数据），我希望能够访问该页面，立即开始键入，并让它跳转到与我键入的文本匹配的第一行

理想情况下，如果我接着继续键入更多字符，使第一个匹配不再匹配，那么它可以继续响应我的输入并跳转到新的匹配

我尝试过window.find（）但没有太大成功。。。有人能提出有效的解决方案吗

---

我基本上是在寻找与在键盘上按“CTRL-F”相同的键。。。除了不需要按CTRL-F键就可以了。

我认为这其中的棘手部分实际上是智能地接受用户输入。因此，我认为最好的做法是将搜索传递给自动完成类型的插件。一旦页面准备好，你将焦点传递给一个输入文本框，然后让插件在你搜索时发挥它的魔力

例如，您可以使用插件

然后给出一个数据表和如下输入：

<input id="searcher" type="text" name="searcher">

$('#searcher').quicksearch('table tbody tr', {
    'delay': 100,
    'bind': 'keyup keydown',
    'show': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        $(this).addClass('show');
    },
    'onAfter': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        if ($('.show:first').length > 0){
            $('html,body').scrollTop($('.show:first').offset().top);
        }
    },
    'hide': function() {
        $(this).removeClass('show');
    },
    'prepareQuery': function(val) {
        return new RegExp(val, "i");
    },
    'testQuery': function(query, txt, _row) {
        return query.test(txt);
    }
});

$('#searcher').focus();

在这里尝试一下：

---

编辑：添加其他答案/注释，以修复输入，并阻止滚动条如此可笑地跳跃。

好的，这里有一个不同的方法，直接使用按键：

基本上，绑定按键并使用：

$('body').keypress(function(e) {
    $('#typed').append(String.fromCharCode(e.which));
    if (!findString($('#typed').text())) {
        $('#typed').text('');
    }
});

---

findString

只是一个模糊的跨浏览器页面字符串查找器。有关详细信息，请参阅小提琴。

关于这是否比您的其他答案更好/更差，您有什么想法吗？你的另一个答案非常有效！好的，这一个不必有任何额外的用户界面-也就是说，您可以完全不让

#键入的
div可见。另外，另一个只能在表上工作，而这个只能在文档中的任何位置找到文本。我同意另一个更好：）我有一种不好的感觉，这可能会与浏览器对关键事件或系统中其他事情的正常处理交互。它可能不会做坏事，但似乎最好以更正常的方式做事情，除非有特别好的理由不这样做，而这里的情况并非如此。在我看来，这种方法可能会导致无法预见的、难以识别的与系统中其他事物的交互。。。类似于在一般编程中使用过宽的范围。由于github不是一个合适的cdn，并且无法加载js文件，因此这方面的麻烦被打破了。。用JSFIDLE修复了它不起作用，我无法让它在我的站点上工作。获取quicksearch不是函数的错误。使用chrome 56.0.2924.87（64位）。还尝试了firefox 52.0（32位）@nwolybug-修复了它，以后，尝试查看控制台输出-它会准确地告诉您问题所在。请参阅更新的示例和JSFIDLE（现在在我的答案中链接）