如何使用mark.js突出显示不同的搜索结果? [英] How to highlight different search results with mark.js?
问题描述
我的目标
我在HTML页面中有一个文本,我希望能够使用mark.js在其上使用两个不同的搜索框.第一个搜索框应以一种颜色突出显示匹配的单词,第二个框应以另一种颜色突出显示匹配的结果.
我尝试过的
我有以下代码:
CSS:
标记{填充:0;背景颜色:黄色;}
jQuery:
$(function(){var mark = function(){//阅读关键字var keyword = $("input [name ='keyword']").val();//删除之前标记的元素并标记//上下文中的新关键字$(.context").unmark({完成:function(){$(.context").mark(keyword);}});};$("input [name ='keyword']").on("input",mark);});
HTML:
<输入type ="text" name ="keyword">< div class ="context">狐狸越过篱笆</div>
正在工作的JSFiddle:
My goal
I have a text in a HTML page, and I want to be able to use two different search boxes on it, using mark.js. The first search box should highlight matching words in a color, and the second box should highlight matching results in a different color.
What I have tried
I have the following code :
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>
Working JSFiddle : JSFiddle.
My problem is that I don't know how to add a second search box without duplicating the JavaScript code ; and when I do, the search in the second search box erases the highlight from the search in the first search box.
I have found the following thread that seems to solve my problem (I had to delete this link because I do not have enough rep to post more than two links), but I get a 404 Error when I try to access the JSFiddles.
How can I add a second search box that allow me to have results of the first search box in a color and the result of the second search box in another color, without having one search erasing the other ?
EDIT
From the answer I got, I believe I did not ask cleary my question. So here is a "half working" JSFiddle, where you can see the two search boxes I need. If I search 'fox' in the first search box and then 'fence' in the second ; 'fox' is not highlighted anymore, but 'fence' is. I would like both to stay highlighted, with different colors. I really don't have a clue how to do this.
My previous answer was for two boxes and one input, but this answer is one box and two inputs, as you requires. I don't remove the previous answer if someone needs that solution
This new solution requires a classname, I called .secondary
. See the code:
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);
});
And the CSS
mark {
padding: 0;
background-color:yellow;
}
mark.secondary {
padding: 0;
background-color: orange;
}
You can see on the javascript that I called twice to mark()
function, and on the second call I add a className. You can see more options for mark.js here:
This is a screenshot with the final result:
这篇关于如何使用mark.js突出显示不同的搜索结果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!