手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >使用jQuery简单实现模拟浏览器搜索功能
使用jQuery简单实现模拟浏览器搜索功能
摘要:写的匆忙,示意一下,有待完善。把以下代码复制到文本文件中,把文件扩展名改为.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>

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

【使用jQuery简单实现模拟浏览器搜索功能】相关文章:

jQuery插件jRumble实现网页元素抖动

jQuery基于图层模仿五星星评价功能的方法

jQuery结合ajax实现动态加载文本内容

javascript实现日期按月份加减

jQuery实现限制textarea文本框输入字符数量的方法

如何实现浏览器上的右键菜单

JQuery中上下文选择器实现方法

jQuery插件zepto.js简单实现tab切换

jQuery使用zTree插件实现树形菜单和异步加载

JavaScript实现列表分页功能特效

精品推荐
分类导航