如何使用mark.js突出显示不同的搜索结果？

Question

我的目标

我在HTML页面中有一个文本，我希望能够使用mark.js在其上使用两个不同的搜索框。第一个搜索框应突出显示颜色中的匹配单词，第二个框应突出显示不同颜色的匹配结果。

我尝试了什么

我有以下代码：

CSS：

mark {
  padding: 0;
  background-color:yellow;
}

jQuery：

$(function() {
  var mark = function() {
    // Read the keyword
    var keyword = $("input[name='keyword']").val();
    // Remove previous marked elements and mark
    // the new keyword inside the context
    $(".context").unmark({
      done: function() {
        $(".context").mark(keyword);
      }
    });
  };
  $("input[name='keyword']").on("input", mark);
});

HTML：

<input type="text" name="keyword">
<div class="context">
The fox went over the fence
</div>

使用JSFiddle：JSFiddle。

我的问题是我不知道如何在不复制JavaScript代码的情况下添加第二个搜索框;当我这样做时，第二个搜索框中的搜索会在第一个搜索框中删除搜索中的突出显示。

我发现以下线程似乎解决了我的问题（我不得不删除此链接，因为我没有足够的rep来发布两个以上的链接），但是当我尝试访问JSFiddles时遇到404错误

如何添加第二个搜索框，允许我将第一个搜索框的结果显示为一种颜色而第二个搜索框的结果采用另一种颜色，而不会有一个搜索删除另一个搜索框？

修改

从我得到的答案，我相信我没有问清楚我的问题。所以这是"half working" JSFiddle，您可以在其中看到我需要的两个搜索框。如果我搜索“狐狸”。在第一个搜索框中然后围栏＆＃39;在第二 ; ＆＃39;狐＆＃39;不再突出显示，但＆＃39; fence＆＃39;是。我希望两者都保持突出显示，颜色不同。我真的不知道如何做到这一点。

Answer 1

我之前的回答是两个盒子和一个输入，但这个答案是一个盒子和两个输入，如你所要求的那样。如果有人需要该解决方案，我不会删除之前的答案

这个新解决方案需要一个名为.secondary的类名。见代码：

https://jsfiddle.net/1at87fnu/55/

$(function() {
  var mark = function() {
    // Read the keyword
    var keyword = $("input[name='keyword']").val();
    var keyword2 = $("input[name='keyword2']").val();
    // Remove previous marked elements and mark
    // the new keyword inside the context
    $(".context").unmark({
      done: function() {
        $(".context").mark(keyword).mark(keyword2, {className: 'secondary'});
      }
    });
  };
  $("input[name^='keyword']").on("input", mark);
});

和CSS

mark {
  padding: 0;
  background-color:yellow;
}
mark.secondary {
  padding: 0;
  background-color: orange;
}

你可以在javascript上看到我两次调用mark()函数，在第二次调用时我添加了一个className。您可以在此处查看mark.js的更多选项：

https://markjs.io/#mark

这是截至最终结果的屏幕截图：

Answer 2

只需将其添加到您的选择器上：

https://jsfiddle.net/1at87fnu/49/

  $(function() {
    var mark = function() {
      // Read the keyword
      var keyword = $("input[name='keyword']").val();
      // Remove previous marked elements and mark
      // the new keyword inside the context
      $(".context, .context2").unmark({
        done: function() {
          $(".context, .context2").mark(keyword);
        }
      });
    };
    $("input[name='keyword']").on("input", mark);
  });

HTML

<input type="text" name="keyword">
<div class="context">
    The fox went over the fence
</div>
<div class="context2">
    The fox went over the fence
</div>

感谢jQuery递归选择器，您可以用逗号分隔添加所需的所有选择器：

$('.one, #two, three[disabled]')

等等。

更新

使用CSS，您可以在框之间应用不同的颜色。只需定位您正在使用的框，例如CSS：

https://jsfiddle.net/1at87fnu/50/

mark {
  padding: 0;
  background-color:yellow;
}
.context2 mark {
  padding: 0;
  background-color: orange;
}