JavaScript-在页面中查找文本并跳转到页面中的位置 [英] JavaScript- find text within a page and jump to location in page

问题描述

我有一个包含大量记录列表的网页（例如，表格中有250多行数据），并希望能够访问该页面，立即开始输入内容，并让它跳转到匹配的第一行我输入的文字。理想情况下，如果我继续输入更多的字符以便第一场比赛不再匹配，那么它可以继续响应我的输入并跳转到新的比赛。

我试过用window.find（），但没有太多成功......任何人都可以推荐一个工作解决方案吗？

我基本上在寻找相当于在我的键盘上击打'CTRL-F'的东西，除非不需要按CTRL-F就可以实现。

解决方案

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

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

然后给出一个数据表和一个像这样的输入：

 < input id =searchertype =textname =searcher> 
  

您可以看到如下所示的准备功能：

  $（'＃searcher'）。quicksearch（'table tbody tr'，{
'delay'：100，
'bind'：' （$（'＃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/

编辑：其他答案/ comment添加到输入固定和停止scollbar如此荒唐地跳跃。

I have a webpage with a large list of records (say 250+ rows of data in a table) and want to be able to just visit the page, immediately start typing, and have it jump me to the first row that matches the text I have typed.

Ideally, if I then continued to type more characters so the first match doesn't match anymore, it could then continue to respond to my input and jump me to the new match.

I've tried with window.find() but haven't had much success... can anyone reccomend a working solution?

I'm essentially looking for the equivalent to hitting 'CTRL-F' on my keyboard... except without the need to hit CTRL-F to make it happen.

解决方案

I think the tricky part of this is actually the accepting of user input intelligently. Therefore, I'd say the best thing to do is to pass off your searching to an autocomplete-type plugin. Once the page is ready, you pass the focus to an input text box, and then let the plugin do its magic as you search...

For example, you could use the quicksearch plugin.

Then given a table of data and an input like this:

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

You could have a ready function that looks like this:

$('#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();

Try it out here: http://jsfiddle.net/ZLhAd/369/

EDIT: other answer/comment added in to make the input fixed and stop the scollbar jumping around so ridiculously.

这篇关于JavaScript-在页面中查找文本并跳转到页面中的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！