Gibt es eine Möglichkeit,() unübertroffene Suchelemente mit mark.js zu verstecken?

Question

Gibt es eine Möglichkeit,() unübertroffene Suchelemente mit mark.js zu verstecken? Nach dem Lesen der Dokumentation dachte ich zunächst, dass ich die "noMatch" -Option verwenden könnte, um eine benutzerdefinierte Funktion zu schreiben, um das übergeordnete div von nicht übereinstimmendem Text zu verbergen, aber es funktioniert nicht wie erhofft.

Zum Beispiel, wenn ich mark.js bin mit suchen und markieren „Lorem“ in der folgenden:

<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> 

Wie kann ich es nur auf die abgestimmte Elemente wie so zurückkehren?

<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> 

Hier ist meine aktuellen Code-Block:

$(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 Hier ist meine verändert jsfiddle aus den mark.js Beispiele für ein besseres Beispiel dafür, was ich bin versucht zu tun. Vielen Dank für Ihre Hilfe im Voraus!

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>