How to highlight different search results with mark.js?

highlight, html, javascript, jquery

Solution

My previous answer was for two boxes and one input, but this answer is one box and two inputs, as you requires. I don't remove the previous answer if someone needs that solution

This new solution requires a classname, I called `.secondary`. See the code:

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

And the CSS

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

You can see on the javascript that I called twice to `mark()` function, and on the second call I add a className. You can see more options for mark.js here:

https://markjs.io/#mark

This is a screenshot with the final result:

Problem

My goal I have a text in a HTML page, and I want to be able to use two different search boxes on it, using mark.js. The first search box should highlight matching words in a color, and the second box should highlight matching results in a different color. What I have tried I have the following code : 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> ``` Working JSFiddle : JSFiddle. My problem is that I don't know how to add a second search box without duplicating the JavaScript code ; and when I do, the search in the second search box erases the highlight from the search in the first search box. I have found the following thread that seems to solve my problem (I had to delete this link because I do not have enough rep to post more than two links), but I get a 404 Error when I try to access the JSFiddles. How can I add a second search box that allow me to have results of the first search box in a color and the result of the second search box in another color, without having one search erasing the other ? EDIT From the answer I got, I believe I did not ask cleary my question. So here is a "half working" JSFiddle, where you can see the two search boxes I need. If I search 'fox' in the first search box and then 'fence' in the second ; 'fox' is not highlighted anymore, but 'fence' is. I would like both to stay highlighted, with different colors. I really don't have a clue how to do this.

Original source