JavaScript- 在页面中查找文本并跳转到页面中的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4327416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript- find text within a page and jump to location in page
提问by Keith Palmer Jr.
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.
我有一个包含大量记录列表的网页（比如表格中有 250 多行数据），并且希望能够访问该页面，立即开始输入，然后让它跳转到与我匹配的文本的第一行已经打字。
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?
我试过 window.find() 但没有取得太大的成功......有人可以推荐一个有效的解决方案吗？
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.
我本质上是在寻找相当于在我的键盘上按 'CTRL-F' 的方法......除非不需要按 CTRL-F 来实现它。
采纳答案by Ryley
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 quicksearchplugin.
例如，您可以使用quicksearch插件。
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/
在这里试试：http: //jsfiddle.net/ZLhAd/369/
EDIT: other answer/comment added in to make the input fixed and stop the scollbar jumping around so ridiculously.
编辑：添加了其他答案/评论以使输入固定并阻止 scollbar 如此可笑地跳跃。
回答by Ryley
OK, here's a different take, using keypress directly:
好的，这里有一个不同的看法，直接使用按键：
http://jsfiddle.net/ryleyb/VFVZL/1/
http://jsfiddle.net/ryleyb/VFVZL/1/
Basically, bind keypress and use that:
基本上，绑定按键并使用它：
$('body').keypress(function(e) {
$('#typed').append(String.fromCharCode(e.which));
if (!findString($('#typed').text())) {
$('#typed').text('');
}
});
findStringis just some vaguely cross browser page string finder. See the fiddle for details.
findString只是一些模糊的跨浏览器页面字符串查找器。有关详细信息，请参阅小提琴。
