js实现仿浏览器Ctrl+F全局模糊搜索并高亮显示

news/2024/7/11 1:15:53 标签: javascript, jquery, html, 前端
htmledit_views">

话不多说,直接上代码:
html

html" title=javascript>javascript"><div class="input-group searchDiv">
     <input class="layui-input layui-input-sm layui-inline" type="text" id="keyWord"                 
     autocomplete="off" placeholder="请输入搜索内容">
</div>

js:
 

html" title=javascript>javascript"><script type="text/html" title=javascript>javascript">
    $(function () {
        $("#keyWord").on("input.highlight", function () {
            var searchTerm = $(this).val();
            //此处的functionTree为你想要搜索的指定div的id
            $("#functionTree").unmark().mark(searchTerm,
                {
                    "acrossElements": true,
                    "separateWordSearch": false,
                }
            );
        }).trigger("input.highlight").focus();
    });
</script>


http://www.niftyadmin.cn/n/1332666.html

相关文章

面试今日头条好不容易到了三面却跪到了源码上(灬ꈍ ꈍ灬)

最近&#xff0c;我的一位朋友在找工作&#xff0c;已经拿到了美团、快手等公司的Offer&#xff0c;准备选择其中一家入职了。后来他又接到了字节跳动的电话&#xff0c;通知他去参加三面。从二面到三面之间隔了挺久的&#xff0c;他以为都没戏了&#xff0c;结果就收到了通知。…

推荐几个阿里,百度大佬的订阅号给大家

公众号发展到今天&#xff0c;其种类和数量繁多&#xff0c;经常看的人眼花缭乱&#xff0c;技术圈也不例外&#xff0c;要从中挑出值得信赖的原创作者与优质内容&#xff0c;是一件很费精力的事情。所以&#xff0c;今天给大家精心推荐一些行业里做的非常用心的原创公众号&…

Css3旋转的效果

开发工具与关键技术&#xff1a;DW rotate()、keyframes 撰写时间&#xff1a;2019年1月18日 1、在Css3中用rotate()函数通过指定的角度参数使元素相对原点进行旋转来实现的画效果时&#xff0c;你会发现当它在旋转的过程中是不会有停顿的现象&#xff0c;会一直旋转到设置的…

Css3的旋转和位移

开发工具与关键技术&#xff1a;DW rotate()、translate() 撰写时间&#xff1a;2019年1月26日 这是一个通过HTML的布局和css3来实现简单好玩的动画效果。&#xff08;效果图如下&#xff1a;&#xff09; 在css3中使旋转rotate()函数通过指定的角度参数让元素相对原点进行旋…

纯Css3画出的凯蒂猫

开发工具与关键技术&#xff1a;DW border属性 撰写时间&#xff1a;2019年1月31日哈哈&#xff0c;直奔主题不多说废话&#xff0c;先看看效果图吧&#xff01; 是不是好可爱&#xff0c;有没有被萌到&#xff1f; 首先&#xff0c;我们来看一下 HTML 的头部结构布局&#xf…

为啥感觉金九银十是别人的,自己是铜九铁十呢?

人物画像果哥&#xff1a;一线公司小码农&#xff0c;一直走在求职的路上。果妹&#xff1a;一线公司美女面试官&#xff0c;一直和小码农们苦苦纠缠。果博士&#xff1a;资深码农&#xff0c;见解通常一针见血&#xff0c;质疑前请先看发量。故事开始果妹为啥感觉金九银十是别…

Css3 会跳动的心

开发工具与关键技术&#xff1a;DW scale()缩放 撰写时间&#xff1a;2019年2月9日先做一个简单的?图&#xff0c;再利用Css3的动画scale()函数让元素根据中心原点对对象进行缩放&#xff0c;这样就可以实现一颗会跳动的心了。下面让我们一起来看看效果图吧&#xff01; 嗯~~…