我的目标
我在 HTML 页面中有一个文本,我希望能够使用 mark.js 在其上使用两个不同的搜索框。第一个搜索框应以一种颜色突出显示匹配词,第二个搜索框应以不同颜色突出显示匹配结果。
我尝试过的
我有以下代码:
CSS:
mark {
padding: 0;
background-color:yellow;
}
jQuery :
$(function() {
var mark = function() {
// Read the keyword
var keyword = $("input[name='keyword']").val();
// Remove previous marked elements and mark
// the new keyword inside the context
$(".context").unmark({
done: function() {
$(".context").mark(keyword);
}
});
};
$("input[name='keyword']").on("input", mark);
});
HTML:
<input type="text" name="keyword">
<div class="context">
The fox went over the fence
</div>
工作 JSFiddle:JSFiddle .
我的问题是我不知道如何在不复制 JavaScript 代码的情况下添加第二个搜索框;当我这样做时,第二个搜索框中的搜索删除了第一个搜索框中搜索的突出显示。
我发现以下线程似乎可以解决我的问题(我不得不删除此链接,因为我没有足够的代表发布两个以上的链接),但是当我尝试访问 JSFiddles 时出现 404 错误.
如何添加第二个搜索框,使第一个搜索框的结果显示为一种颜色,第二个搜索框的结果显示为另一种颜色,而不用一个搜索删除另一个搜索框?
编辑
从我得到的答案来看,我相信我没有问清楚我的问题。所以这是一个"half working" JSFiddle ,在那里你可以看到我需要的两个搜索框。如果我在第一个搜索框中搜索“fox”,然后在第二个搜索框中搜索“fence”; 'fox' 不再突出显示,但 'fence' 突出显示。我希望两者都以不同的颜色突出显示。我真的不知道该怎么做。
最佳答案
我之前的答案是两个框和一个输入,但这个答案是一个框和两个输入,如您所愿。如果有人需要该解决方案,我不会删除以前的答案
这个新的解决方案需要一个类名,我称之为.secondary
。看代码:
https://jsfiddle.net/1at87fnu/55/
$(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'});
}
});
};
$("input[name^='keyword']").on("input", mark);
});
和 CSS
mark {
padding: 0;
background-color:yellow;
}
mark.secondary {
padding: 0;
background-color: orange;
}
您可以在 javascript 上看到我对 mark()
函数调用了两次,在第二次调用中我添加了一个类名。您可以在此处查看 mark.js 的更多选项:
这是最终结果的截图:
关于javascript - 如何使用 mark.js 突出显示不同的搜索结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43680080/