有没有办法使用 mark.js 隐藏（）不匹配的搜索元素？

Question

有没有办法使用 mark.js 隐藏（）不匹配的搜索元素？阅读文档后，我最初认为我可以使用“noMatch”选项编写自定义函数来隐藏不匹配文本的父 div，但它没有按预期工作。

例如，如果我使用 mark.js 在以下内容中搜索并突出显示“Lorem”：

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

我怎样才能让它只返回匹配的元素呢？

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

这是我当前的代码块：

$(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，这是我正在尝试做的更好的示例。感谢您提前提供任何帮助！

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>