Simple implementation of simulated browser search using jQuery
- 2020-05-07 19:13:42
- OfStack
Write in a hurry, gesture 1, to be improved. Copy the following code into a text file and change the file extension to.html to run.
<html>
<head>
<style type="text/css">
.res
{
color: Red;
}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var oldKey = "";
var index = -1;
var pos = new Array();
var oldCount = 0;
function search(flg) {
if (!flg) {
index++;
index = index == oldCount ? 0 : index;
}
else {
index--;
index = index < 0 ? oldCount - 1 : index;
}
$(".result").removeClass("res");
$("#toresult").remove();
var key = $("#key").val(); // take key value
if (!key) {
oldKey = "";
return; //key Null exits
}
if (oldKey != key) {
// reset
index = 0;
$(".result").each(function () {
$(this).replaceWith($(this).html());
});
pos = new Array();
$("body").html($("body").html().replace(new RegExp(key, "gm"), "<span id='result" + index + "' class='result'>" + key + "</span>")); // replace
$("#key").val(key);
oldKey = key;
$(".result").each(function () {
pos.push($(this).offset().top);
});
oldCount = $(".result").length;
}
$(".result:eq(" + index + ")").addClass("res");
$("body").scrollTop(pos[index]);
}
</script>
</head>
<body>
<div style="position: fixed; right: 20px; top: 0;">
<input id="key" type="text" style="width: 100px;" />
<input type="button" value=" Under the 1 a " onclick="search()" />
<input type="button" value=" on 1 a " onclick="search(1)" />
</div>
<div style="height: 50px;">
</div>
<div style="height: 200px;">
1 Text to be searched.
</div>
<div style="height: 200px;">
2 Text to be searched.
</div>
<div style="height: 200px;">
3 Text to be searched.
</div>
<div style="height: 200px;">
4 Text to be searched.
</div>
<div style="height: 200px;">
5 Text to be searched.
</div>
<div style="height: 200px;">
10 Beautiful hometown.
</div>
<div style="height: 200px;">
11 Beautiful hometown.
</div>
<div style="height: 200px;">
12 Beautiful hometown.
</div>
<div style="height: 200px;">
13 Beautiful hometown.
</div>
<div style="height: 200px;">
14 Beautiful hometown.
</div>
<div style="height: 200px;">
15 Beautiful hometown.
</div>
</body>
</html>
Here is mainly to provide you with an idea, friends can't wait to improve it.