页面搜索的简单实现

最新推荐文章于 2024-04-23 09:58:36 发布

原创

最新推荐文章于 2024-04-23 09:58:36 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何简单实现页面搜索功能，主要通过HTML元素替换来完成。在使用Bootstrap时可能会遇到样式丢失问题，需要重新绑定样式。内容包括将整个body放入DOM中，设置弹窗以及添加CSS样式来满足定制需求。参考了JSP页面的CTRL+F功能实现。

这里页面搜索的实现是简单的HTML元素替换，如果使用的是bootstrap的话会有样式丢失的情况出现，需要重新绑下时间：

整个body放在一个dom里面：

<body>
    <div id="window_content">
    ....
    </div>
</body>

弹窗在这里：

<div style="width: 600px;position: fixed;top: 50px;left: 20px;z-index: 999; display: none" 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>

css里面加个样式，也可以根据需求自定义：

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

        .result {
            background: yellow;
        }