使用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 相关文章推荐
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
安装vue-cli的简易过程
May 22 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 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 上传文件大小限制
2009/07/05 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
python列表操作使用示例分享
2014/02/21 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python之pandas用法大全
2018/03/13 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Tensorflow 多线程设置方式
2020/02/06 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
《逃家小兔》教学反思
2014/02/23 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python