Question

我使用的mark.js插件允许在页面上搜索文本，它会在您键入时找到文本，如果您按Enter键，您将跳转到下一个结果，直到找到并且突出了所有结果。唯一的问题是，当它到达最后的结果时，它会将搜索结束，如果您按Enter键，则无法从第一个结果重新开始搜索。

我需要能够在找到最后一个结果后回滚到第一个结果（就像当您使用Google Chrome查找框（Control + F）搜索某些内容时一样。

[Working Fiddle] 您需要稍微滚动小提琴中的结果选项卡，以便查看搜索框。

以下函数负责在结果之间滚动，它将跳转到页面上的最后一个（Next）找到文本：

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++;
        }

提前谢谢。

Answer 1

从您提供的文档中，我能够找出一个突出显示所有单词并允许单词循环的实现。一般来说，变化如下：

创建一个名为 offsets 的数组，以跟踪当前＆＃34;顶部偏移量＆＃34;突出显示的单词。这是从容器顶部到突出显示的单词的距离度量。
```
arrowOffset = 0;
var offsets = [];
```

将 options.done 功能更改为以下实现：从搜索中获取所有偏移并将其存储在我们的数组中偏移;

var m = $('mark[data-markjs]');

offsets = [];

for (var i = 0; i < m.length; i++)
    offsets.push($(m[i]).offset().top);
}

更改您的＆＃34; keyup＆＃34;以下实现的事件处理程序：

e.preventDefault();

if (e.which == 13 || e.which == 40) { // 13 = enter key, 40 = down arrow
  if (++arrowOffset >= offsets.length) {
    arrowOffset = 0;
  }
} else if (e.which == 38) { // 38 = up arrow
  if (--arrowOffset < 0) {
    arrowOffset = offsets.length - 1;
  }
}

$('html,body').animate({
  scrollTop: offsets[arrowOffset] - 100
}, 100);

最后，在功能结束时，请致电

$("input[name='keyword']").on("keyup", mark);
$("input[type='checkbox']").on("change", mark);

Working Fiddle

jQuery实时搜索 - 在页面找到所有可用结果后返回第一个结果

1 个答案: