Existe-t-il un moyen de masquer() les éléments de recherche sans correspondance en utilisant mark.js?

Question

Existe-t-il un moyen de masquer() les éléments de recherche sans correspondance en utilisant mark.js? Après avoir lu la documentation, j'ai d'abord pensé que je pouvais utiliser l'option "noMatch" pour écrire une fonction personnalisée afin de masquer la div parente d'un texte sans correspondance, mais cela ne fonctionne pas comme espéré.

Par exemple, si j'utilise mark.js pour rechercher et mettre en évidence « Lorem » dans ce qui suit:

<div class="panel-body context"> 
     <h2>Lorem</h2> 
     <div> 
      <p>ipsum</p> 
      <p>lorem</p> 
     </div> 
     <h2>ipsum</h2> 
     <div> 
      <p>ipsum</p> 
      <p>lorem</p> 
     </div> 
    </div> 

Comment puis-je obtenir à seulement renvoyer les éléments appariés comme ça?

<div class="panel-body context"> 
    <h2><span="highlight">Lorem</span><h2> 
    <div> 
     <p><span="highlight">lorem</span></p> 
    </div> 
    <div> 
     <p><span="highlight">lorem</span></p> 
    </div> 
</div> 

Voici mon bloc actuel de code:

$(function() { 

    var mark = function() { 

     // Read the keyword 
     var keyword = $("input[name='search-keyword']").val(); 

     // Determine selected options 
     var options = { 
      "element": "span", 
      "className": "highlight", 
      "separateWordSearch": false, 
      "noMatch": function(term) { 
       term.hide(); // WHERE I HOPED I COULD ADD HIDE LOGIC 
      } 
     } 
     // Remove previous marked elements and mark 
     // the new keyword inside the context 
     $(".panel-body context").unmark({ 
      done: function() { 
       $(".panel-body context").mark(keyword, options); 
      } 
     }); 
    }; 

    $("input[name='search-keyword']").on("input", mark); 

}); 

EDIT Voici mon modifié jsfiddle des exemples de mark.js pour un meilleur exemple de ce que je tente de faire. Merci pour toute assistance à l'avance!

Answer 1

$(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'}); 
 
     $("#binddata").text(keyword); 
 
     } 
 
    }); 
 
    }; 
 
    $("input[name^='keyword']").on("input", mark); 
 
});

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

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/superhero/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 
<input type="text" name="keyword"><input type="text" name="keyword2"> 
 
<span id="binddata">Bind Character</span> 
 
<div class="context"> 
 
The fox went over the fence 
 
<h2>Lorem<h2> 
 
     <div> 
 
      <p>ipsum</p> 
 
      <p>lorem</p> 
 
     </div> 
 
     <h2>ipsum</h2> 
 
     <div> 
 
      <p>ipsum</p> 
 
      <p>lorem</p> 
 
     </div> 
 
</div>