score:0

its not the complete solution, but you can adapt this example:

https://jsfiddle.net/julmot/hdylpy37/

it uses the markjs library:

https://markjs.io/

here is the javascript code:

// create an instance of mark.js and pass an argument containing
// the dom object of the context (where to search for matches)
var markinstance = new mark(document.queryselector(".context"));
// cache dom elements
var keywordinput = document.queryselector("input[name='keyword']");
var optioninputs = document.queryselectorall("input[name='opt[]']");

function performmark() {

  // read the keyword
  var keyword = keywordinput.value;

  // determine selected options
  var options = {};
  [].foreach.call(optioninputs, function(opt) {
    options[opt.value] = opt.checked;
  });

  // remove previous marked elements and mark
  // the new keyword inside the context
  markinstance.unmark({
    done: function(){
        markinstance.mark(keyword, options);
    }
  });
};

// listen to input and option changes
keywordinput.addeventlistener("input", performmark);
for (var i = 0; i < optioninputs.length; i++) {
  optioninputs[i].addeventlistener("change", performmark);
}

Related Query

More Query from same tag