使用jQuery简单实现模拟浏览器搜索功能
使用jQuery简单实现模拟浏览器搜索功能
发布时间:2016-12-30 来源:查字典编辑
摘要:写的匆忙,示意一下,有待完善。把以下代码复制到文本文件中,把文件扩展名改为.html就可以运行了。复制代码代码如下:.res{color:R...

写的匆忙,示意一下,有待完善。把以下代码复制到文本文件中,把文件扩展名改为.html就可以运行了。

复制代码 代码如下:

<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(); //取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"), "<span id='result" + index + "'>" + key + "</span>")); // 替换

$("#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>

<input id="key" type="text" />

<input type="button" value="下一个" />

<input type="button" value="上一个" />

</div>

<div>

</div>

<div>

1待搜索的文本。

</div>

<div>

2待搜索的文本。

</div>

<div>

3待搜索的文本。

</div>

<div>

4待搜索的文本。

</div>

<div>

5待搜索的文本。

</div>

<div>

10美丽的家乡。

</div>

<div>

11美丽的家乡。

</div>

<div>

12美丽的家乡。

</div>

<div>

13美丽的家乡。

</div>

<div>

14美丽的家乡。

</div>

<div>

15美丽的家乡。

</div>

</body>

</html>

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类