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如此可笑地跳跃.

Answer 2

好的,这是一个不同的看法,直接使用keypress:

http://jsfiddle.net/ryleyb/VFVZL/1/

基本上,绑定按键并使用:

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

findString只是一些模糊的跨浏览器页面字符串查找器.请参阅小提琴了解详情.