基于jQuery实现浏览器Ctrl+F搜索功能

实现效果：

 

引入样式：

        .res {
            /*color: Red;*/
            background: rgb(215, 48 ,48);
            color: white;
        }

        .result {
            background: yellow;
        }

搜索框：

<div style="width: 600px;position: fixed;top: 50px;left: 20px;z-index: 999; id="search_key_dom_">
    <input type="text" id="search_key">
    <button id="search_btn" >搜索</button>
    <button id="search_top" >上一个</button>
    <button id="search_next">下一个</button>
    <button id="search_cancle_">取消搜索</button>
</div>
<div id="window_content">

    <!-- 待搜索的内容全部放在这个里面-->
    

</div>

 

    //这里用requireJS引入js方法类
    var searchPageUtil = require("js/common/searchUtilWindows");

    //绑定事件
    $("#search_btn").click(function () {
        searchPageUtil.next(true);
        document.getElementById('search_next').focus();
    })
    $("#search_top").click(function () {
        searchPageUtil.previous();
        document.getElementById('search_next').focus();
    })
    $("#search_next").click(function () {
        searchPageUtil.next()
    })
    $("#search_cancle_").click(function () {
        $("#search_key_dom_").hide();
        $("#search_key").val("");
        searchPageUtil.redisplay();
    })

 //搜索工具类，这里用的requireJS

define(["jquery"], function($) {
    var oldKey = "";
    var index = -1;
    var pos = new Array();//用于记录每个关键词的位置，以方便跳转
    var posy = new Array();//用于记录每个关键词的位置，以方便跳转
    var oldCount = 0;//记录搜索到的所有关键词总数

    var previous = function(){
        index--;
        index = index < 0 ? oldCount -