实现ctrlF5搜索功能
Posted qinxuhui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现ctrlF5搜索功能相关的知识，希望对你有一定的参考价值。
<html> <head> <style type="text/css"> .res { color: Red; } .result{ background: yellow; } </style> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var oldKey = ""; var index = -1; var pos = new Array();//用于记录每个关键词的位置，以方便跳转 var oldCount = 0;//记录搜索到的所有关键词总数 function previous(){ index--; index = index < 0 ? oldCount - 1 : index; search(); } function next(){ index++; //index = index == oldCount ? 0 : index; if(index==oldCount){ index = 0 ; } search(); } function search() { $(".result").removeClass("res");//去除原本的res样式 var key = $("#key").val(); //取key值 if (!key) { console.log("key为空则退出"); $(".result").each(function () {//恢复原始数据 $(this).replaceWith($(this).html()); }); oldKey = ""; return; //key为空则退出 } if (oldKey != key) { console.log("进入重置方法"); //重置 index = 0; $(".result").each(function () { $(this).replaceWith($(this).html()); }); pos = new Array(); var regExp = new RegExp(key+‘(?!([^<]+)?>)‘, ‘ig‘);//正则表达式匹配 $("body").html($("body").html().replace(regExp, "<span id=‘result" + index + "‘ class=‘result‘>" + key + "</span>")); // 高亮操作 $("#key").val(key); oldKey = key; $(".result").each(function () { pos.push($(this).offset().top); }); oldCount = $(".result").length; console.log("oldCount值：",oldCount); } $(".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="next()" /> <input type="button" value="上一个" onclick="previous()" /> </div> <div style="height: 100px;"> </div> <div style="height: 100px;"> 11111111111</div> <div style="height: 100px;"> 222222222</div> <div style="height: 100px;"> 3333333 </div> </body> </html>
以上是关于实现ctrlF5搜索功能的主要内容，如果未能解决你的问题，请参考以下文章
如何在 BottomNavigationView 的片段上打开搜索界面？
html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。