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

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

这个负责使用回车键触发上一个功能：

if(e.which==13){ // 13 = enter key
            e.preventDefault();
            arrowOffset++;
        }

提前致谢。

Answer 1

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

1. 创建一个名为 offsets 的数组来跟踪突出显示单词的当前“顶部偏移量”。这是从容器顶部到突出显示的单词的距离度量。

   arrowOffset = 0;
   var offsets = [];
   

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

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

3. 将您的“keyup”事件处理程序更改为以下实现：

   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);
   

4. 最后，在你的函数结束时，调用

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

Working Fiddle