mark.js를 사용하여 일치하지 않는 검색 요소를 숨길 수있는 방법이 있습니까?

Question

mark.js를 사용하여 일치하지 않는 검색 요소를 숨길 수있는 방법이 있습니까? 문서를 읽은 후에 필자는 "noMatch"옵션을 사용하여 필적 할 수없는 텍스트의 부모 div를 숨기는 사용자 지정 함수를 작성할 수 있다고 생각했지만 기대했던대로 작동하지 않습니다. 나는 다음 검색에 "LOREM"을 강조 mark.js을 사용하고있는 경우

예를 들어, :

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

어떻게 그렇게 같은에만 일치하는 요소를 반환받을 수 있나요?

$(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); 

}); 

편집 여기 내 내가 할 시도하고있는 무슨의 더 나은 예를 들어 mark.js 예에서 jsfiddle을 변경 :

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

여기에 내 현재 코드 블록입니다. 사전에 도움을 주셔서 감사합니다! 사이비 선택기 not``.panel 바디 H2 :하지 (.highlight), .panel 바디 P :하지 (.highlight) {디스플레이

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>