Multiple context function, get only selected items, highlight results

site2/css/mystyle.css

@@ -58,6 +58,11 @@
   font-weight: bold;
 }
 
+.highlight {
+  color: red;
+  font-weight: bold;
+}
+
  /*Loader*/
  .loader {
   border: 16px solid #f3f3f3;

site2/js/ricerca.js

@@ -199,6 +199,7 @@ function funzioneRicerca(){
 function checkContext() {
   let resulTable = document.getElementById("result");
   const checkBoxes = resulTable.querySelectorAll('input[type="checkbox"]');
+  let arrayContesti = [];
 
   var selected = [];
   $('#result input:checked').each(function() {
@@ -211,17 +212,21 @@ function checkContext() {
     for (var j=0; j<selected.length; j++) {
       if (arrayResponse[i]["cod"] == selected[j]) {
         arrayResponse[i]["selected"] = true;
+        arrayContesti.push(arrayResponse[i]);
       }
     }
   }
 
-  queryDTO["listResults"] = arrayResponse; 
+  queryDTO["listResults"] = arrayContesti; 
 
   console.log(queryDTO);
 
+  $("#result").html("");
+  $("#loader").css("display", "block");
+
   getData('/get_context', queryDTO)
   // After request finishes, process response data
-  .done(response => processContext(response))
+  .done(response => processOccData(response))
   .fail(err => {
     console.log(err);
     $("#loader").css("display", "none");
@@ -593,7 +598,8 @@ function createRow(num, elem) {
 function createOccRow(num, elem) {
   var titolo_abbreviato = elem["Titolo Abbreviato"];
   var contesto = elem["contesto"];
-  var word = elem["lemma"];
+  contesto = contesto.replace(/\n/g, "<br />");
+  let words = elem["highlights_combined"];
   var rif_organico = elem["Rif_organico"];
   var pag = elem["pag"];
   var riga = elem["riga"];
@@ -601,8 +607,11 @@ function createOccRow(num, elem) {
   var tipostanza = elem["tipostanza"];
   var verso = elem["verso"];
 
-  contesto = contesto.replace(/\n/g, "<br />");
-  let str = contesto.replace(word, '<span style="color:red">' + word + '</span>');
+  for (var i=0; i<words.length; i++) {
+    contesto = contesto.replace(words[i], '<span class="highlight">' + words[i] + '</span>');
+  }
+  //contesto = contesto.replace(/\n/g, "<br />");
+  //let str = contesto.replace(word, '<span style="color:red">' + word + '</span>');
 
   var row = document.createElement('div');
   row.className = "row height d-flex justify-content-center align-items-center";
@@ -660,7 +669,7 @@ function createOccRow(num, elem) {
   if (elem.hasOwnProperty('contesto')) {
     var colContesto = document.createElement('div');
     colContesto.className = "col-4 contestoCol";
-    colContesto.innerHTML = str;
+    colContesto.innerHTML = contesto;
     row.append(colContesto);
   }