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


Posted in Javascript onDecember 21, 2014

写的匆忙,示意一下,有待完善。把以下代码复制到文本文件中,把文件扩展名改为.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 + "' class='result'>" + 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 style="position: fixed; right: 20px; top: 0;">

        <input id="key" type="text" style="width: 100px;" />

        <input type="button" value="下一个" onclick="search()" />

        <input type="button" value="上一个" onclick="search(1)" />

    </div>

    <div style="height: 50px;">

    </div>

    <div style="height: 200px;">

        1待搜索的文本。

    </div>

    <div style="height: 200px;">

        2待搜索的文本。

    </div>

    <div style="height: 200px;">

        3待搜索的文本。

    </div>

    <div style="height: 200px;">

        4待搜索的文本。

    </div>

    <div style="height: 200px;">

        5待搜索的文本。

    </div>

    <div style="height: 200px;">

        10美丽的家乡。

    </div>

    <div style="height: 200px;">

        11美丽的家乡。

    </div>

    <div style="height: 200px;">

        12美丽的家乡。

    </div>

    <div style="height: 200px;">

        13美丽的家乡。

    </div>

    <div style="height: 200px;">

        14美丽的家乡。

    </div>

    <div style="height: 200px;">

        15美丽的家乡。

    </div>

</body>

</html>

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

Javascript 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
jquery仿微信聊天界面
May 06 jQuery
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
实例讲解React 组件
Jul 07 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
编写简单的jQuery提示插件
Dec 21 #Javascript
不使用ajax实现无刷新提交表单
Dec 21 #Javascript
webapp框架AngularUI的demo改造之路
Dec 21 #Javascript
浅析webapp框架AngularUI的demo
Dec 21 #Javascript
AngularJS基础知识
Dec 21 #Javascript
javascript关于继承的用法汇总
Dec 20 #Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 #Javascript
You might like
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
php备份数据库类分享
2015/04/14 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python实现网站表单提交和模板
2019/01/15 Python
pandas数据集的端到端处理
2019/02/18 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
快速创建python 虚拟环境
2020/11/28 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
印度在线杂货店:bigbasket
2018/08/23 全球购物
员工自我鉴定
2013/10/09 职场文书
化学实验员岗位职责
2013/12/28 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
上班打牌检讨书
2014/02/07 职场文书
学校食堂标语
2014/10/06 职场文书
大学生个人总结范文
2015/02/15 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
创业计划书之旅游网站
2019/09/06 职场文书