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

Question

我有一个包含大量记录列表的网页(比如表中有 250 多行数据)，我希望能够访问该页面，立即开始输入，然后让它跳到匹配的第一行我输入的文字。

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

我已经尝试过使用 window.find() 但没有取得太大的成功......任何人都可以推荐一个可行的解决方案吗？

我本质上是在寻找相当于在我的键盘上敲击“CTRL-F”的方法……除了不需要敲击 CTRL-F 来实现它。

Answer 1

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

例如，您可以使用 quicksearch插入。

然后给定一个数据表和这样的输入:

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

在这里试试:http://jsfiddle.net/ZLhAd/369/

编辑:添加了其他答案/评论以使输入固定并停止 scollbar 如此荒谬地跳来跳去。