有没有办法使用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,以便更好地举例说明我正在尝试做的事情。感谢您提前获得任何帮助!
答案 0 :(得分:0)
$(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>