jQuery实时搜索-在页面找到所有可用结果后返回第一个结果
我正在使用mark.js插件，它允许在页面上搜索文本，它会在你键入时查找文本，如果你按Enter键，你会跳到下一个结果，直到它找到并突出显示所有结果。唯一的问题是，当它到达最后一个结果时，它给出的搜索是结束的，并且如果您按Enter键，搜索不能从第一个结果重新开始。
我需要能够在找到最后一个结果后滚动回第一个结果(就像你使用Google Chrome Find Box (Control + F)搜索东西时发生的那样)。
[Working Fiddle]您需要稍微滚动一下小提琴中的result选项卡，才能看到搜索框。
以下函数负责在结果之间滚动，它将跳转到页面上找到的最后(下一个)文本：
done: function() {
var mark = $('mark[data-markjs]').last(); // Scroll to last <mark>
if (mark.length) {
$('html,body').animate({scrollTop: mark.offset().top-100}, 100);
}
}此函数负责使用Enter键触发上一个函数：
if(e.which==13){ // 13 = enter key
e.preventDefault();
arrowOffset++;
}提前进行Thx检查。
回答 1
Stack Overflow用户
发布于 2016-06-30 23:03:30
从您提供的文档中，我能够找出一个高亮显示所有单词并允许循环单词的实现。一般而言，更改如下：
- 创建一个名为offsets的数组来跟踪高亮显示单词的当前“顶部偏移”。这是从容器顶部到被高亮显示的单词之间的距离度量。
arrowOffset = 0；var offsets =[]；
- 将您的options.done函数更改为以下实现:从搜索中获取所有偏移量并将它们存储在我们的数组偏移量中；
var m= $('markdata-markjs')；offsets = []；for (var i= 0；i< m.length；i++) offsets.push($(mi).offset().top)；}
- 将"keyup“事件处理程序更改为以下实现：
e.preventDefault()；if (e.which == 13 || e.which == 40) { // 13 = enter键，40 =下箭头if (++arrowOffset >= offsets.length) { arrowOffset = 0；}} else if (e.which == 38) { // 38 =上箭头if (--arrowOffset < 0) { arrowOffset = offsets.length - 1；}} $('html，body').animate({ scrollTop: offsetsarrowOffset - 100 }，100)；
- 最后，在函数的末尾，调用
$(“inputname=‘关键字’”).on(“keyup”，标记)；$("inputtype='checkbox'").on("change"，标记)；
https://stackoverflow.com/questions/38129780
复制
相似问题
使用jquery在页面上搜索和返回结果
jQuery:突出显示实时搜索结果
具有实时结果的JQuery搜索
AJAX实时搜索不返回结果
实时搜索结果
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
