使用jQuery简单实现模拟浏览器搜索功能_jquery

代码如下:





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(); //取key值
if (!key) {
oldKey = "";
return; //key为空则退出
}

if (oldKey != key) {
//重置
index = 0;
$(".result").each(function () {
$(this).replaceWith($(this).html());
});
pos = new Array();

$("body").html($("body").html().replace(new RegExp(key, "gm"), "" + key + "")); // 替换

$("#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]);
}











1待搜索的文本。


2待搜索的文本。


3待搜索的文本。


4待搜索的文本。


5待搜索的文本。


10美丽的家乡。


11美丽的家乡。


12美丽的家乡。


13美丽的家乡。


14美丽的家乡。


15美丽的家乡。

这里主要是个大家提供一个思路，小伙伴们等不及的话就自己完善下吧。