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只是一些模糊的跨浏览器页面字符串查找器。请查看小提琴。

Answer 3

有一个不推荐的原型（截至 21 年 7 月 19 日）在 PROD 网站上使用，但如果您想尝试一下，那么它非常简单且最好的部分是这是第一方。

只需在此堆栈溢出窗口本身的控制台上键入此内容：

window.find("Aniket");

更多信息可以在这里找到 - https://developer.mozilla.org/en-US/docs/Web/API/Window/find

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

3 个答案: